Css 如何让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>
​

这是一个很好的例子
毛里斯·尤里索斯的阿利夸
前庭拍卖人dapibus neque
​

…这就产生了

如您所见，这三个元素是他们最高兄弟的高度（第一个

li

）

如果我移除最高的元素，我希望会出现回流，其他元素成为下一个最高元素的高度

我所期望的

到底发生了什么

有趣的是，当您开始在WebInspector中检查元素时，问题会自行解决。也许我可以通过显式触发浏览器重绘来重现这种自校正，但我不希望引入JavaScript来处理CSS中应该100%处理的内容

---

有没有一种方法可以告诉Flexbox在删除同级元素时收缩/重新计算？

我找到了这个方法

将这两个属性添加到

li

元素中

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

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