如何让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）的高度。

如果我删除了最高的元素，我希望有一个回流，其他元素成为下一个最高元素的高度。

我的期望......

实际发生了什么......

有趣的是，当您开始检查Web Inspector中的元素时，问题会自行解决。也许我可以通过明确触发浏览器重绘来重现这个自我纠正，但我不想在CSS中为100％处理的内容引入JavaScript。

有没有办法告诉Flexbox在删除兄弟元素时缩小/重新计算？

Answer 1

我想出了这个......

将这两个属性添加到li元素...

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

jsFiddle

现在，当您删除第一个元素时，其他元素会缩小以适应。