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.