How to prevent a flex item’s height from expanding to match other flex items with CSS?

Sometimes, we want to prevent a flex item’s height from expanding to match other flex items with CSS.

In this article, we’ll look at how to prevent a flex item’s height from expanding to match other flex items with CSS.

How to prevent a flex item’s height from expanding to match other flex items with CSS?

To prevent a flex item’s height from expanding to match other flex items with CSS, we set the align-self property.

For instance, we write

<div class="container">
  <div class="flexbox-1">align-self: flex-start;</div>
  <div class="flexbox-2">.flexbox-2</div>
</div>

to add nested divs.

Then we write

.container {
  display: flex;
}
.flexbox-2 {
  flex: 2;
  border: solid 3px blue;
  height: 200px;
  margin-left: 10px;
}
.flexbox-1 {
  flex: 1;
  align-self: flex-start;
  border: solid 3px red;
}

to make the outer div a flex container with display: flex;.

And then we add align-self: flex-start; to the first child div to make it align to the top, which stops it from expanding to match the other element in the div.

Conclusion

To prevent a flex item’s height from expanding to match other flex items with CSS, we set the align-self property.