How to make a flex item not fill the height of the flex container with CSS?

Sometimes, we want to make a flex item not fill the height of the flex container with CSS.

In this article, we’ll look at how to make a flex item not fill the height of the flex container with CSS.

How to make a flex item not fill the height of the flex container with CSS?

To make a flex item not fill the height of the flex container with CSS, we sett the align-self property.

For instance, we weite

<div id="a">
  <div id="b">left</div>
  <div id="c">middle</div>
  <div>right<br />right<br />right<br />right<br />right<br /></div>
</div>

to add some elements.

Then we write

#a {
  display: flex;
  align-items: flex-start;
  align-content: flex-start;
}

#a > div {
  background-color: red;
  padding: 5px;
  margin: 2px;
}

#a > #c {
  align-self: stretch;
}

to maker the outer element a flex container with display: flex;.

We set the elements to vertically align to the top with align-items: flex-start;.

Then we make the div with ID c stretch vertically to fit the parent with align-self: stretch;.

Conclusion

To make a flex item not fill the height of the flex container with CSS, we sett the align-self property.