How can I completely hide the elements that overflow their container vertically?

Question

I have a fixed container of width and height, which consists of arbitrary height elements that need to be stacked vertically. How can I hide any elements that do not fit? overflow: hidden can still display part of an element that is not overflowing.

 .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

Assuming your children are the same width as the container, this can be achieved by using the containing window created with flex .

The trick is to use flex-flow: column wrap; in combination with overflow: hidden; on the container. The first dictates that the content is stacked vertically and that everything that does not fit should be wrapped in a second column outside the container's content field. The latter dictates that this second column (and any subsequent columns) should be hidden.

 .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

An easy way to do this would be to use CSS columns instead of flex .

Just use column-width equal to the width of the container. Apply break-inside: avoid to the child div s. And there you are.

It resolves all requests:

[..] have a fixed container of width and height, which consists of arbitrary height elements that must be stacked vertically. How can I hide elements that do not fit?

You may notice that the red div (last) is completely hidden.

Fragment example:

 * { 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> 

Note. . At the moment, Firefox is still a problem area with CSS columns. break-inside , although documented in MDN , is erroneous in Firefox. The error is still open: https://bugzilla.mozilla.org/show_bug.cgi?id=549114 .