Html 溢出隐藏不起作用

我有这个密码

HTML:

<div class="mframes">
    <div class="mframe" id="liveBand">
            <div class="mframeDetails mfrDetSum" style="background-color: rgba(255,0,0,0.5);">
                    <p>Live Band Performance</p>
                    <p>Stay tuned for more details</p>
                    <div class="mframeBtn" id="leftmframeBtn" style="">Read More</div>
            </div><div class="mframeDetails mfrDetFull" style="left:50%;background-color: green;">
                    <p>This is the main interesting blah blah </p>
            </div>
    </div><div class="mframe" id="dj">
            <div class="mframeDetails mfrDetFull" style="left:0%;background-color: green;">

            </div><div class="mframeDetails mfrDetSum" style="left:50%;background-color: rgba(255,0,0,0.5);">
                <div class="mframeBtn" id="rightmframeBtn" style=""></div>
            </div>
    </div>
</div>

.mframe

包含比自身大的div。其溢出样式设置为“隐藏”。然而，它无法修剪它的孩子

---

怎么了？

删除位置：绝对？您是在JS中设置顶部和左侧，还是它们是相对的

它可以是高度和宽度的百分比，而不是数字。我给你玩一会儿

编辑：下面，我想我找到了

从您发布的JSFIDLE链接中的此类中删除下面的行

display: inline-block;

.mframe{
    margin: 0;
    height: 100%;
    width: 50%;
    background-color: black;
    overflow: hidden;
}

要设置高度和宽度，请确保显示：block，然后可以应用溢出=）

---

代码中有许多

.mframe

元素。。。哪一个是完全溢出的…？实际上高度和宽度不会影响这个问题，因为绝对会保留空间，即使它是隐藏的，我想。

display: inline-block;

.mframe{
    margin: 0;
    height: 100%;
    width: 50%;
    background-color: black;
    overflow: hidden;
}