10

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?

Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
Sarah C
  • 337
  • 1
  • 3
  • 8
  • 1
    Have you used the code from the csstricks site verbatim? You need some vendor prefixes to make it work properly everywhere. Apologies if you just didn't include them brevity! – David Alsbright Sep 30 '15 at 22:18

3 Answers3

10

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.

Community
  • 1
  • 1
Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
  • How about using `100vh`? – deltab Oct 01 '15 at 00:36
  • @deltab, `vh` is definitely an option, if you want the element's height to be relative to the viewport. – Michael Benjamin Oct 01 '15 at 00:42
  • 1
    Thank you @Michael_B - that was a great breakdown and clarification. I opted to set a pixel height on the list's parent because, for my project, it would affect fewer things and decrease my headaches. :) – Sarah C Oct 01 '15 at 21:00
5

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

display: flex;
justify-content: center;
align-items: stretch;
Praveen Kumar
  • 849
  • 8
  • 8
  • Please complete your answer. Also: `align-items: stretch` is the default, and `justify-content: center` should not affect item size. Please elaborate? – handle Dec 03 '21 at 13:53
1

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% 
}
Binu Mohan
  • 29
  • 2