Equal height flex items in flex columns

Question

I am trying to make it so list items in a column have equal height inside their list.

Here is what I have:

<ol>
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
</ol>

ol {
   min-height: 100%;
   display: flex;
   flex-direction: column;
}

ol li { 
   flex: 1;
}

I have tried: I have attempted to follow this tutorial: https://css-tricks.com/boxes-fill-height-dont-squish/ to no avail. I think the trouble has to do with having to set height: 100% to every single parent element all the way to html. Can that be right?

My list is deeply nested and setting all those heights breaks the layout. I would prefer to work only with fluid heights.

I have also tried: accomplishing this with just divs instead of a list. Still, no luck.

Any clues?

Answer 1

Since you're using a percentage height on the flex container...

ol { min-height: 100%; }

... you need to also define a height for the parent and root elements.

HTML (no changes)

<ol>
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
</ol>

CSS

html, body { height: 90%; } /* NEW; needed for child percentage heights to work; 
                              set at 90% just for demo purposes */
ol {
   min-height: 100%;
   display: flex;
   flex-direction: column;
}

ol li { 
   flex: 1;
}

DEMO: http://jsfiddle.net/kzL4305k/1/

I think the trouble has to do with having to set height: 100% to every single parent element all the way to html. Can that be right?

Yes, that is correct. If you use percentage heights you need to specify the height for every single parent all the way up to the root element (html). I've explained the reason for this here:

• Working with the CSS height property and percentage values

My list is deeply nested and setting all those heights breaks the layout. I would prefer to work only with fluid heights.

You don't need to set the height for parent elements if you don't use percentages. Try using min-height in pixels on flex containers, then letting flex-grow: 1 deal with the height issue for flex items.

Answer 2

This is the easiest way to set flex items an equal height.

display: flex;
justify-content: center;
align-items: stretch;

Answer 3

Just add the following css

ol {  
     display: -webkit-box; 
     display: -webkit-flex;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-align: stretch;
     -webkit-align-items: stretch;
     -ms-flex-align: stretch;
     align-items: stretch;
     -webkit-flex-wrap: wrap;
     -ms-flex-wrap: wrap;
     flex-wrap: wrap;
}
ol li {
     background: gold;
     padding: 5px 5px;
     margin: 5px 5px;
     width: 25% 
}