在flex-direction: column子元素里直接使用height：100%，height并不会被设置成100%
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.height-500-px {
height: 500px;
}
.height-100-per {
height: 100%;
}
.bg-gray {
background: gray;
}
.bg-yellow {
background: yellow;
}
.flex-column {
display: flex;
flex-direction: column;
}
.flex-grow-1 {
flex-grow: 1;
}
</style>
</head>
<body>
<div class="flex-column height-500-px bg-gray">
<div class="flex-grow-1">
<div class="height-100-per bg-yellow"></div>
</div>
</div>
</body>
</html>
解决办法是在flex-grow-1这一层再加一个flex row
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.height-500-px {
height: 500px;
}
.height-100-per {
height: 100%;
}
.bg-gray {
background: gray;
}
.bg-yellow {
background: yellow;
}
.bg-blue {
background: blue;
}
.flex-column {
display: flex;
flex-direction: column;
}
.flex-grow-1 {
flex-grow: 1;
}
.flex-column-row {
display: flex;
flex-direction: row;
}
</style>
</head>
<body>
<div class="flex-column height-500-px bg-gray">
<div class="flex-grow-1 flex-column-row">
<!-- 注意不要加height:100% -->
<div class="bg-yellow flex-grow-1 height-100-per"></div>
</div>
<div class="flex-grow-1 flex-column-row">
<div class="bg-blue flex-grow-1"></div>
</div>
<div class="flex-grow-1 flex-column-row">
<div class="flex-grow-1">
<!-- 里面一层加height:100%是可以的 -->
<div class="bg-yellow height-100-per"></div>
</div>
</div>
</div>
</body>
</html>
从以上情况可以大致推测
flex-column子元素的height:100%会优先于flow布局来计算高度，所以直接在flex-column子元素设height:100%没有效果，因为在计算height:100%的时候，高度为0
原文地址：https://www.cnblogs.com/chen8840/p/9157230.html
时间： 2024-08-29 18:52:46