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

Question

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     x000D   x000D   a   x000D    display  flex  x000D    x000D   a  gt  div   x000D    background-color  red  x000D    padding  5px  x000D    margin  2px  x000D    x000D   b   x000D    height  auto  x000D    x000D   lt div id  a  gt  x000D     lt div id  b  gt left lt  div gt  x000D     lt div gt right lt br gt right lt br gt right lt br gt right lt br gt right lt br gt  lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Accepted 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   x000D   x000D   a   x000D    display flex  x000D   x000D    align-items flex-start  x000D    align-content flex-start  x000D      x000D   x000D   a  gt  div   x000D     x000D    background-color red  x000D    padding 5px  x000D    margin 2px  x000D      x000D    a  gt   c   x000D    align-self stretch  x000D     x000D   lt div id  a  gt  x000D     x000D     lt div id  b  gt left lt  div gt  x000D     lt div id  c  gt middle lt  div gt  x000D     lt div gt right lt br gt right lt br gt right lt br gt right lt br gt right lt br gt  lt  div gt  x000D     x000D   lt  div gt  x000D   x000D   x000D    css-tricks has an excellent article on the topic  I recommend reading it a couple of times

User · Answer

When you create a flex container various default flex rules come into play   Two of these default rules are flex-direction  row and align-items  stretch  This means that flex items will automatically align in a single row  and each item will fill the height of the container   If you don t want flex items to stretch  ndash  i e   like you wrote      make its height the minimum required for holding its content       then simply override the default with align-items  flex-start    x000D   x000D   a   x000D    display  flex  x000D    align-items  flex-start     NEW    x000D    x000D   a  gt  div   x000D    background-color  red  x000D    padding  5px  x000D    margin  2px  x000D    x000D   b   x000D    height  auto  x000D    x000D   lt div id  a  gt  x000D     lt div id  b  gt left lt  div gt  x000D     lt div gt  x000D      right lt br gt right lt br gt right lt br gt right lt br gt right lt br gt  x000D     lt  div gt  x000D   lt  div gt  x000D   x000D   x000D    Here s an illustration from the flexbox spec that highlights the five values for align-items and how they position flex items within the container  As mentioned before  stretch is the default value    Source  W3C

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

Examples related to html

Examples related to css

Examples related to flexbox