How to get flexbox to respect deleted items?

I use Flexbox to achieve the same height columns in WebKit browsers.

I use 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 ...

Example

jsFiddle .

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

If I deleted the highest element, I would expect that there will be a remelting in which other elements will become the height of the next highest element.

What did I expect ...

:)

What really happened...

:(

, Web Inspector, . , , , JavaScript , 100% CSS.

Flexbox /, -?

+3
1

, ...

li...

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

jsFiddle.

, , .

+2

All Articles