嵌套容器上的高度相同
此代码确保所有嵌套容器始终具有相同的高度。这是通过确保所有嵌套元素与包含 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
}