How Can I Make an Element Vertically Fill Available Space in a Flexbox?

Flexbox: Vertically Filling Available Space

In a flexbox row, using flex on an element allows it to grow and fill the remaining available space. Now, the question arises: can we replicate this behavior vertically?

In the scenario described, you have a flexbox row where you want one element to vertically span the height of the parent container, even if the container has a fixed height. While positioning the element absolutely with bottom: 0; is a viable solution, the desired result is sought using flexbox.

To achieve this:

1. Set flex-direction: column for the flex container.
2. Assign flex: 1 to the element that should occupy the remaining space.

Here's a demo:

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

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

In this example, the flexbox element, with flex: 1, fills the entire vertical space of the parent container, as desired.

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