我使用"http://dev.w3.org/csswg/css3-flexbox/"rel="not follown noreferr">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>
产生...
"https://i.sstatic.net/raRcb.png" alt="示例"/ >
jsFiddle 。
如你所见,三个元素是它们最高的兄弟姐妹的高度(第一个li )。
如果我删除了最高元素,我预计会有回流,其他元素成为下一个最高元素的高度。
我所期望的...
究竟发生了什么...
有趣的是,当你开始检查网络检查员中的元素时,问题本身就纠正了。也许我可以通过明确触发浏览器再油漆来复制这个“自我修正” ,但我宁愿不必在 CSS 中引入 JavaScript 来进行100%的处理。
是否有方法可以让 Flexbox 在删除比方元素时进行缩放/重新计算?