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

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

It resolves all of the asks:

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

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

Example Snippet:

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