巢狀容器上的高度相同

此程式碼確保所有巢狀容器始終具有相同的高度。這是通過確保所有巢狀元素與包含 parrent div 的高度相同來完成的。參見工作示例https//jsfiddle.net/3wwh7ewp/

由於屬性 align-items 預設設定為 stretch,因此實現了此效果。

HTML

<div class="container">
  <div style="background-color: red">
    Some <br />
    data <br />
    to make<br />
    a height <br />
 </div>
  <div style="background-color: blue">
    Fewer <br />
    lines <br />
 </div>
</div>

CSS

.container {
    display: flex;
    align-items: stretch; // Default value
}

注意: 不適用於 10 以下的 IE 版本