user81993 user81993 - 1 month ago 6
CSS Question

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

As you can see in the code below, the left div inside the flex container stretches to meet the height of the right div. Is there an attribute I can set to make its height the minimum required for holding its content (like usual

height: auto
divs outside flex containers)?



#a {
display:flex;
}

#a > div {

background-color:red;
padding:5px;
margin:2px;
}

#b {

height:auto;

}

<div id="a">

<div id="b">left</div>
<div>right<br>right<br>right<br>right<br>right<br></div>

</div>




Answer

The align-items, or respectively align-content attribute controls this behaviour.

align-items defines the items positioning perpendicularly to flex-direction, the default flex-direction is row, therfore vertical placement can be controlled with align-items. There is also the align-self attribute to control the alignment on a per item basis.

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

css-tricks has an excellent article on the topic. I recommend reading it a couple of times.

Comments