How to Make Flexbox Children Occupy the Full Height of Their Parent Container?

How to Make Flexbox Children the Same Height as Their Parent

When working with Flexbox, you may encounter challenges making child elements fill the entire vertical space of their parent container. This can be particularly frustrating if you want the child elements to be 100% of the parent's height.

Flexbox Parent Container Setup

Here's a simplified version of your HTML and CSS code:

HTML:

<div class="container">
  <div class="flex-1"></div>
  <div class="flex-2">
    <div class="flex-2-child"></div>
  </div>
</div>

CSS:

.container {
  height: 200px;
  width: 500px;
  display: flex;
  flex-direction: row;
}
.flex-1 {
  width: 100px;
  background-color: blue;
}
.flex-2 {
  position: relative;
  flex: 1;
  background-color: red;
}
.flex-2-child {
  height: 100%;
  width: 100%;
  background-color: green;
}

Solution: align-items: stretch

To resolve this issue without resorting to absolute positioning or setting the height of the flex-2 element to 100%, you can use the align-items: stretch property on the parent container flex-2.

.flex-2 {
  display: flex;
  align-items: stretch;
}

Note on Height Property

It's crucial to remove the height: 100% property from the flex-2-child element. This will ensure that the child element stretches vertically within the parent container.

Alternative: align-self

Another option is to use align-self: stretch on the specific child element you want to fill the height.

.flex-2-child {
  align-self: stretch;
}

This method gives you more control over the individual child elements.

The above is the detailed content of How to Make Flexbox Children Occupy the Full Height of Their Parent Container?. For more information, please follow other related articles on the PHP Chinese website!