如何隱藏浮動元素的溢出內容

Question

我有2列，每列50％寬度。 在每一列中，我溢出的內容絕對相對於正文定位。

<div class='column left'>
    <div class='inner'><h1>Pink</h1></div>
</div>
<div class='column right '>
    <div class='inner'><h1>Blue</h1></div>
</div>

我需要隱藏inner div。 我怎么做？ 設置overflow:hidden在.column上對inner div無效。 小提琴這里

PS。 想法是為列的寬度設置動畫並顯示內部內容。 這個小提琴說明了我正在嘗試實現的目的（但是由於瀏覽器的要求，我正在使用vh ， vw不能使用它）

html, body {
    width :100%;
    height: 100%;
    position: relative;
}

.column {
    float: left;
    width: 50%;
    height: 100%;
    overflow: hidden; /*has no effect*/
}

.inner {
    position: absolute;
    top: 50%;
    width: 100px;
}

.left .inner {
    right: 20px;
    text-align: right;
}

.right .inner {
    left: 20px;
    text-align: left;
}

Answer 1

您只是在尋找嗎

visibility: hidden;

要么

display: none;

最后一個將元素從DOM中刪除。