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.