コンテナを垂直方向にオーバーフローさせる要素を完全に隠すにはどうすればよいですか？

Question

私は、垂直に積み重ねる必要がある任意の高さの要素からなる固定幅と高さのコンテナを持っています。どのように適合しない要素を隠すことができますか？ overflow: hiddenは、まだオーバーフローしていない要素の部分を表示できます。

.container { 
 
    border: 1px solid #eee; 
 
    height: 200px; 
 
    overflow: hidden; 
 
} 
 

 
.box { 
 
    background-color: #ccc; 
 
    line-height: 54px; 
 
    margin: 20px; 
 
    text-align: center; 
 
    width: 60px; 
 
} 
 

 
.incorrect { 
 
    background-color: #fa9; 
 
}

<div class="container"> 
 
    <div class="box">show</div> 
 
    <div class="box">show</div> 
 
    <div class="box incorrect">hide</div> 
 
</div>

Answer 1

あなたの子要素がコンテナと同じ幅を持っている、これはflexプロパティから作成されているボックスを活用することによって達成することができると仮定すると。

このトリックは、コンテナのoverflow: hidden;と組み合わせてflex-flow: column wrap;を使用することです。前者は、コンテンツが垂直に積み重ねられ、適合しないものがコンテナのコンテンツボックスの外側の2番目の列にラップされるように指示します。後者は、この2番目の列（および後続の列）を非表示にする必要があります。

.container { 
 
    width: 300px; 
 
    height: 200px; 
 
    display: flex; 
 
    flex-flow: column wrap; 
 
    overflow: hidden; 
 
} 
 

 
.box { 
 
    width: 300px; 
 
    height: 75px; 
 
} 
 

 
.box:nth-child(1) { 
 
    background: red; 
 
} 
 
.box:nth-child(2) { 
 
    background: green; 
 
} 
 
.box:nth-child(3) { 
 
    background: blue; 
 
}

<div class='container'> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
</div>

Answer 2

flexの代わりにCSS columnsを使用することですこれを行うための簡単な方法。

コンテナの幅に等しいcolumn-widthを使用してください。子divにbreak-inside: avoidを適用します。そして、そこに行く。

それは尋ねるの全てを解決：

[..]垂直に積層する必要がある任意 高さの要素で構成され、固定された幅と高さの容器を有します。どのように適合しない要素 を非表示にすることができますか？

赤いdiv（最後のもの）が完全に非表示になっていることがわかります。

例スニペット：

* { box-sizing: border-box; margin: 0; padding: 0; } 
 
.container { 
 
    border: 1px solid #999; 
 
    height: 200px; width: 300px; 
 
    overflow: hidden; 
 
    column-width: 300px; 
 
} 
 
.box { 
 
    padding: 8px; text-align: center; color: #fff; 
 
    width: 250px; height: 80px; 
 
    break-inside: avoid 
 
} 
 
.box:nth-child(1) { background: #3b3; } 
 
.box:nth-child(2) { background: #33b; width: 200px; height: 75px; } 
 
.box:nth-child(3) { background: #b33; }

<div class="container"> 
 
    <div class="box">show</div> 
 
    <div class="box">show</div> 
 
    <div class="box">hide</div> 
 
</div>

注：今のよう、FirefoxはまだCSSの列の問題領域です。 break-insideは、documented on MDNですが、Firefoxではバグです。バグはまだ開いています：https://bugzilla.mozilla.org/show_bug.cgi?id=549114。