How to Make Flexbox Children Occupy the Full Parent Height?

Flexbox Children to Occupy Full Parent Height

In a Flexbox layout, by default, child elements do not fill the entire height of their parent container. This can be problematic when attempting to create a consistent vertical arrangement.

Problem: Consider the following example where .flex-2-child within .flex-2 is intended to fill the height of its parent:

.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;
}

However, flex-2-child does not fully occupy the height as expected.

Workaround 1: align-items: stretch:

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

This solution modifies the flex item alignment, allowing flex-2-child to stretch and fill the available height.

Workaround 2: align-self:

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

This alternative solution applies alignment directly to the child element, ensuring it fills the height of its parent flex item.

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