Question

I’m using Flexbox to achieve equal height columns in WebKit browsers.

I’m using this CSS…

ol {
   display: -webkit-box;   
}

ol li {
   width: 100px;
   background: #ccc;
   margin: 5px;
   padding: 5px;    
}

…and this HTML…

<ol>
   <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, dolor sit amet, consectetuer.</li>
   <li>Aliquam tincidunt mauris eu risus.</li>
   <li>Vestibulum auctor dapibus neque.</li>
</ol>
​

…which produces…

jsFiddle.

As you can see, the three elements are the height of their tallest sibling (the first li).

If I removed the tallest element, I’d expect there to be a reflow in which the other elements became the height of the next tallest element.

What I expected…

What actually happened…

As an interesting note, when you start inspecting the elements in Web Inspector, the problem corrects itself. Perhaps I could reproduce this self-correcting by explicitly triggering a browser repaint, but I’d prefer not to have to introduce JavaScript for what should be handled 100% in the CSS.

Is there a way to tell Flexbox to shrink/recalculate when sibling elements are removed?

Answer 1

I figured this one out…

Add these two properties to the li elements…

-webkit-box-flex: 1;
min-height: 0;

jsFiddle.

Now, when you remove the first element, the others shrink to fit.