部分低版本浏览器中flex布局孙子元素高度设置100%失效-终极解决方案— vue技术交流群(864583465)
废话不多说,直接上代码,如下:
<div class="father">
<div class="son">
<div class="grand-son">
grand-son
</div>
</div>
</div>
<style>
.father {
height: 200px;
display: flex;
flex-direction: column;
}
.son {
height: 0; // 指定给个具体的值就行,0 或100% 或其他都行
min-height: 100%; // 必须要设置
max-height: 100%; // 必须要设置
}
.grand-son {
height: 100%;
}
</style>
核心代码:一定要在子元素上设置如下样式
height: 0;
min-height: 100%;
max-height: 100%;