Как получить flexbox для уважения удаленных элементов?

Question

Я использую Flexbox для достижения одинаковых столбцов высоты в браузерах WebKit.

Я использую этот CSS ...

ol { 
    display: -webkit-box; 
} 

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

... и этот 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> 
​ 

... который производит ...

jsFiddle.

Как вы можете видеть, три элемента - это высота их самого высокого брата (первый li).

Если я удалю самый высокий элемент, я ожидаю, что там будет переплавка, в которой другие элементы станут высотой следующего самого высокого элемента.

То, что я ожидал ...

Что произошло на самом деле ...

Как интересное примечание, когда вы начинаете проверки элементов в веб-Инспектора, проблема исправляет себя. Возможно, я смог бы воспроизвести этот самокорректирующий, явно вызвав перерисовку браузера, но я бы предпочел не вводить JavaScript для того, что нужно обрабатывать на 100% в CSS.

Есть ли способ сообщить Flexbox о сокращении/пересчете при удалении элементов брата?

Answer 1

Я полагал, что это один из ...

Добавьте эти два свойства в li элементов ...

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

jsFiddle.

Теперь, когда вы удаляете первый элемент, остальные усаживаются, чтобы соответствовать.