title: Equal height flex items in flex columns
body: <p>I am trying to make it so list items in a column have equal height inside their list. </p>
  
  <p>Here is what I have:</p>
  
  <pre><code>&lt;ol&gt;
      &lt;li&gt;List item 1&lt;/li&gt;
      &lt;li&gt;List item 2&lt;/li&gt;
      &lt;li&gt;List item 3&lt;/li&gt;
  &lt;/ol&gt;
  
  ol {
     min-height: 100%;
     display: flex;
     flex-direction: column;
  }
  
  ol li { 
     flex: 1;
  }
  </code></pre>
  
  <p>I have tried: I have attempted to follow this tutorial: <a href="https://css-tricks.com/boxes-fill-height-dont-squish/" rel="noreferrer">https://css-tricks.com/boxes-fill-height-dont-squish/</a> to no avail. I think the trouble has to do with <em>having to set height: 100% to every single parent element all the way to html</em>. Can that be right?</p>
  
  <p>My list is deeply nested and setting all those heights breaks the layout. I would prefer to work only with fluid heights.</p>
  
  <p>I have also tried: accomplishing this with just divs instead of a list. Still, no luck.</p>
  
  <p>Any clues?</p>