CSS 嵌套容器上的高度相同

示例

此代码确保所有嵌套容器的高度始终相同。这是通过确保所有嵌套元素的高度与包含其的parrent div相同的高度来完成的。

由于该属性默认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; // 默认值
}

注意：不适用于10以下的IE版本