How Can I Make a Flexbox Element Fill Available Vertical Space?

Flexbox: Fill Available Vertical Space

In a horizontal flexbox row, using the "flex" property on an element enables it to grow and fill the available horizontal space. What if you want to achieve a similar effect vertically?

The challenge lies in ensuring that a vertical element expands to fill the remaining space, allowing other elements to stack vertically. To address this, you can employ the following flexbox properties:

• flex-direction: column on the flex container aligns elements vertically instead of horizontally.
• flex: 1 on the element that should fill the remaining space allows it to grow and occupy the remaining height.

Consider the following example:

body {
  margin: 0;
}
*{
  box-sizing: border-box;
}
.row {
  display: flex;
  flex-direction: column;
  height: 100vh;
}
.flex {
  flex: 1;
}
.row, .row > * {
  border: 1px solid;
}

<div class="row">
  <div>some content</div>
  <div class="flex">This fills the available space</div>
  <div>another content</div>
</div>

In this setup, the .row container has a fixed height of the browser viewport using height: 100vh. The .flex element has flex: 1, causing it to expand and fill the remaining vertical space. As a result, the two other elements stack vertically within the .row container.

The above is the detailed content of How Can I Make a Flexbox Element Fill Available Vertical Space?. For more information, please follow other related articles on the PHP Chinese website!