Sometimes, we want to make flexbox layout take 100% vertical space with CSS.
In this article, we’ll look at how to make flexbox layout take 100% vertical space with CSS.
How to make flexbox layout take 100% vertical space with CSS?
To make flexbox layout take 100% vertical space with CSS, we use the flex-grow property.
For instance, we write
<div class="wrapper">
<div id="row1">this is the header</div>
<div id="row2">this is the second line</div>
<div id="row3">
<div id="col1">col1</div>
<div id="col2">col2</div>
<div id="col3">col3</div>
</div>
</div>
to add some nested divs.
Then we write
.wrapper {
display: flex;
flex-direction: column;
flex-wrap: nowrap;
justify-content: flex-start;
align-items: stretch;
align-content: stretch;
height: 100%;
}
#row3 {
background-color: green;
flex: 1 1 auto;
display: flex;
}
to make the div with ID row3 stretch to fit the container with flex: 1 1 auto;.
Conclusion
To make flexbox layout take 100% vertical space with CSS, we use the flex-grow property.
