Geek Answers Handbook

FLEXBOX: auto height for div to vertically fill parent

I have Flexbox markup that needs some attention.

Everything works as intended, except for one last thing. I have some divs in a column layout, of which two are controlled by height or height, and one is not controlled. This last one, which is not adjustable in height (yellow in DEMO ), should occupy such a height that it fills out of the remaining vertical space in its parent div (green).

Even when the window is scaled using this flexible design, the yellow div should always fill up to the bottom of the green parent div.

<div class="flexbox"> <div class="col"> <h3>RED</h3> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p> </div> <div class="col"> <div class="flexbox2"> <div> <h3>GREEN</h3></div> <div class="col1"> Set at responsive height 10 vw. </div> <div class="col1"> This div should adapt its height automatically to fill out the remaining space. </div> </div> </div> <style> .flexbox { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-flex-direction: row; -moz-flex-direction: row; -ms-flex-direction: row; flex-direction: row; } .flexbox .col { flex: 1; } .flexbox .col:nth-child(1) { background: red; order: 0; padding: 5px; } .flexbox .col:nth-child(2) { background: green; order: 1; padding: 5px; color: white; } .flexbox2 { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-flex-direction: column; -moz-flex-direction: column; -ms-flex-direction: column; flex-direction: column; padding: 5px; } .flexbox2 .col1 { flex: 1; } .flexbox2 .col1:nth-child(2) { background: orange; height: 10vw; padding: 5px; } .flexbox2 .col1:nth-child(3) { background: yellow; padding: 5px; color: black; } </style>
+6
source share
3 answers

Column layout will not stretch if it is not inside another flexible layout.

Consider the following changes:

 .flexbox .col:nth-child(2) { display: flex; ... } .flexbox2 .col1 { flex: none; /* Or omit this style altogether. */ } .flexbox2 .col1:nth-child(3) { flex: 1 ... }

It seems you could avoid this first style change by simplifying the markup to collapse the .flexbox2 element into its parent .col element (for example, <div class="col flexbox2"> ).

 .flexbox { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-flex-direction: row; -moz-flex-direction: row; -ms-flex-direction: row; flex-direction: row; } .flexbox .col { flex: 1; } .flexbox .col:nth-child(1) { background: red; order: 0; padding: 5px; } .flexbox .col:nth-child(2) { background: green; order: 1; padding: 5px; color: white; display: flex; } .flexbox2 { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-flex-direction: column; -moz-flex-direction: column; -ms-flex-direction: column; flex-direction: column; padding: 5px; } .flexbox2 .col1 { flex: none; } .flexbox2 .col1:nth-child(2) { background: orange; height: 10vw; padding: 5px; } .flexbox2 .col1:nth-child(3) { background: yellow; padding: 5px; color: black; flex: 1 } 
 <div class="flexbox"> <div class="col"> <h3>RED</h3> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p> </div> <div class="col"> <div class="flexbox2"> <div> <h3>GREEN</h3></div> <div class="col1"> Set at responsive height 10 vw. </div> <div class="col1"> This div should adapt its height automatically to fill out the remaining space. </div> </div> </div>
+3
source

Make the grandparent of the yellow div a flexible container so that align-items: stretch takes effect, which causes the flex elements (including the parent of the yellow div) to extend the entire height of the container.

 .col:nth-child(2) { display: flex; }

The yellow div already filled the remaining space (of its container). The parent ( .flexbox2 ) was limited in height (inside its container).

If you want the orange div to be fixed at height: 10vw , you need to remove the applied flex: 1 .

+1
source

Your flexbox parent does not take all the height:

 .flexbox2 { height: 100%; }

The yellow flexbox should grow:

 .flexbox .col:nth-child(3) { flex-grow: 1; }

https://jsfiddle.net/by4v1ahd/12/

0
source

More articles:


All Articles