Flexible Height Elements in Flexible Columns

Question

I am trying to make the 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 tried: I tried to follow this guide: https://css-tricks.com/boxes-fill-height-dont-squish/ to no avail. I think the problem is with the need to set the height: 100% for each parent element before html. Could this be right?

My list is deeply nested and setting all these heights breaks the layout. I would prefer to work only with the height of the liquid.

I also tried: do this with just a div, not a list. However, no luck.

Any clues?

Answer 1

Since you are using the percentage height in the flex container ...

 ol { min-height: 100%; } 

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

HTML (no change)

 <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 problem is with the need to set height: 100% for each one parent element is fully linked to html. Could this be so?

Yes this is correct. If you use percentage heights, you need to specify the height for each individual parent to the root element ( html ). I explained the reason for this here:

• Work with CSS height property and percentage values

My list is deeply nested and setting all of these layout heights. I would prefer to work only with the height of the liquid.

You do not need to set the height for the parent elements unless you use percentages. Try using min-height in pixels on flexible containers and then flex-grow: 1 will handle the height problem for flex elements.

Answer 2

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% }