How to prevent scrollable container from stretching parent in flex layout

1 day ago 1

ARTICLE AD BOX

There's a problem I constantly run into when making flex layouts: if I have a scrollable container somewhere, it's contents will be factored in parent size calculations and potentially cause it to pop out of the top level container.

Usually when I set something to scroll, I want it to always take up whatever size is available instead of demanding more.

I can set min-height: 0 (or width). But just doing that on the scroll container isn't enough - I have to set it on EVERYTHING. If I don't set it on even one element on the way to the root, then it goes back to popping out. Why is that happening - shouldn't setting it on the container be enough to tell the page that it's fine with not taking up much space? This is not very sustainable because if I add more containers then suddenly my layout breaks in all sorts of ways until I find which elements are missing min-width or min-height.

In this example container a does not have min-height and everything breaks.

.outer { height: 400px; display: flex; flex-direction: column; background-color: black; padding: 10px; width: 400px; } .a { flex: 1 1; display: flex; flex-direction: column; background-color: orange; padding: 10px; } .b { background-color: yellow; padding: 10px; height: 100px; } .c { flex: 1 1; min-height: 0; overflow-y: auto; background-color: red; padding: 10px; } .d { background-color: green; height: 400px; } <div class="outer"> <div class="a"> <div class="b"></div> <div class="c"> <div class="d"></div> </div> </div> </div>

Is there some attribute I'm missing that prevents size from propagating upwards?

There's also a nuclear option of using absolute positioning but it seems more like a hack.