I am trying to create a layout for a component with the following characteristics:
- the contents inside the 'box3' should me constrained to its parent ('box2')
- 'box2' should occupy the max available height space of the parent 'box1'
It looks like I achieved the desired effect, however I don't understand why.
I had to explicitly set some value for main__box1__box2-also-max-h (height: 0px;)
Why is that?Is there a better way?
* { box-sizing: border-box; font-size: 2rem; margin: 0; padding: 0;}.main { display: flex; flex-direction: column; height: 100vh; border: 3px dashed red}.main__box1-stretch-max-h { display: flex; flex-direction: column; flex-grow: 1;}.main__box1__box2-also-max-h { flex-grow: 1; /**************************************** IF THIS IS NOT SET, THE CONTENT OVERFLOWS FROM CHILD BOX3 ****************************************/ height: 0px;}.main__box1__box2__box3-should-stretch-and-not-overflow { height: 100%; overflow-y: auto; padding: 1em; border: 3px dashed lawngreen;}<div class="main"><div class="main__box1-stretch-max-h"><div class="main__box1__box2-also-max-h"><div class="main__box1__box2__box3-should-stretch-and-not-overflow"> content here should not overflow the parents. Lorem ipsum dolor sit amet. At eligendi fugiat ut rerum adipisci et similique dolorum. Et sint similique ut commodi reprehenderit ab modi odio. Qui mollitia mollitia est consequatur harum et quia temporibus vel libero laboriosam aut odio modi aut consequuntur voluptatem</div></div></div></div>