CODEWITHSUNDEEP
htmlcssflexbox
Sarah C
Sarah C

Reputation: 357

Equal height flex items in flex columns

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?

Upvotes: 12

Views: 39727

Answers (3)

Praveen Kumar
Praveen Kumar

Reputation: 959

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

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

Upvotes: 6

Binu Mohan
Binu Mohan

Reputation: 29

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

Upvotes: 1

Michael Benjamin
Michael Benjamin

Reputation: 372274

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:

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.

Upvotes: 10

Related Questions