原始状态
<html>
<head>
<meta charset="utf-8">
<style>
#main
{
width:300px;
height:300px;
border:1px solid black;
display:flex;
flex-direction: column;
}
.a1, .a3
{
height: 50px
}
.a2 {
height: 100px;
}
.a2-child {
height:50px;
background-color: red;
}
</style>
</head>
<body>
<div id="main">
<div class="a1" style="background-color:coral;">a1</div>
<div class="a2" style="background-color:lightblue;">
<div class="a2-child">a2-children</div>
</div>
<div class="a3" style="background-color:lightgreen;">a3</div>
</div>
</body>
</html>
预料之外的状态
拉大 a2-children 的高度使其超出最外层容器
.a2-child {
height:350px;
background-color: red;
}
结论
- flex item 设置高度时，其子元素不能将其撑开
- flex item 的子元素的层级，高于其父元素，低于其父元素的兄弟元素。