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 .
ご覧のとおり、3 つの要素は、最も背の高い兄弟 (最初のli
) の高さです。
最も高い要素を削除すると、他の要素が次に高い要素の高さになるリフローが発生することが予想されます。
私が期待したこと...
実際どうなったんだ…
興味深いことに、Web Inspector で要素の検査を開始すると、問題は自動的に修正されます。おそらく、ブラウザーの再描画を明示的にトリガーすることで、この自己修正を再現できますが、CSS で 100% 処理する必要があるものに JavaScript を導入する必要はありません。
兄弟要素が削除されたときにFlexboxに縮小/再計算するように指示する方法はありますか?