为什么flex为1的元素总是压缩别的固定宽高元素
更新时间: 2025-05-30 08:20:48
经常遇到使用flex的时候，各种元素的表现不像我预期的那样，有时固定宽高的元素会被flex为1的元素压缩。例如：
a元素，我固定了高度为100
b元素，我的flex为1;b元素，我的flex为1;b元素，我的flex为1;b元素，我的flex为1；我的flex为1；我的flex为1；我的flex为1
c元素，我固定了高度为100
.flex-demo1 {
width: 200px;
display: flex;
flex-direction: column;
height: 300px;
.a {
height: 100px;
background: red;
}
.b {
flex: 1;
background: yellow;
}
.c {
height: 100px;
background: green;
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
可以使用F12看到，a元素和b元素的实际高度明显是小于100的, 而实际上我是想要中间flex为1的元素不要挤占别的元素的空间
# 解决
a元素，我固定了高度为100
b元素，我的flex为1;b元素，我的flex为1;b元素，我的flex为1;b元素，我的flex为1；我的flex为1；我的flex为1；我的flex为1
c元素，我固定了高度为100
有两种解决方案：
- 其一是给a和b设置 flex-shrink:0 ，不允许收缩
- 其二是给b设置min-height:0; 给其设置最小高度