css - 如何让 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 中的元素时，问题会自行纠正。或许我可以通过显式触发浏览器重绘来重现此 self 纠正，但我宁愿不必为应该 100% 在 CSS 中处理的内容引入 JavaScript。

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

Answer 1

我想通了...

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

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

jsFiddle .

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