How to make flexbox layout take 100% vertical space with CSS?

Spread the love

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.

Leave a Reply

Your email address will not be published.