神奇的flex-grow
来源：4-10 flex-grow扩展比例
慕莱坞0998854
2022-07-11
老师你好，本节的视频里面讲解的都是容器宽度大于子项宽度的情况，但是今天我突然遇到一个问题，其简化代码为:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div class="p">
<div class="c1"></div>
<div class="c2">
<div class="c3"></div>
</div>
</div>
</body>
</html>
* {
margin:0;
padding:0;
box-sizing:border-box
}
.p {
height:200px;
width:800px;
background-color:red;
display:flex;
}
.c1{
flex-basis:200px;
background:yellow;
height:200px;
}
.c2{
background:green;
overflow:scroll;
flex-grow:1;
}
.c3{
width:1200px;
}
在这个例子中，容器的宽度设置为800px,第一个子元素设置为flex-basis:200px, 第二个元素设置为flex-grow:1,并且里面还有一个子元素设置为width:1200px,那么此时应该是什么样的结果呢？
我一开始的想法是这样的： 父容器宽度是800px,减去第一个元素的宽度200px, 还剩600px,第二个元素恰好flex-grow:1,那么刚好是600px,至于它的1200px子元素,就让它超出好了。
然而现实却十分打脸并且让人震惊:
第一个子元素的宽度直接不起作用，直接变成0了 。
第二个子元素的宽度和它内部的子元素一样，为1200px.
从这里开始我就有点不理解了，按理说，flex-shrink的默认值为1，按理说div.c1和div.c2都应该缩小来满足父元素800px的限制啊?
然后我给div.c1设置flex-shrink:0
此时div.c1的宽度200px起作用了,可是div.c2的宽度还是1200px, 怎么才能让div.c2变成600px呢？(父容器800 - 第一个元素的200)
我也不知道怎么弄，但是就在那不断瞎弄，突然给div.c2设置为overflow:hidden,就可以了，
而我并不知道为什么。
希望老师能解答下为什么不行已经为什么又行了.
PS: CSS给我的感觉就像是无从下手，不知道从哪里分析，出了问题不知道为什么，只能从结果去反推，而不是从代码去推断结果应该是怎么样的。而且CSS的代码就那么一点点，让人感觉很简单，但是卡住了又会卡很久，真的很让人沮丧.
1回答
-
西门老舅
2022-07-11
你好，
首先 p 元素添加了display:flex，这说明 c1 c2 会受到弹性的作用，但是 c3 跟弹性没关系，因为c3的父元素 c2 并不是display: flex形式。所以你给 c3 添加 width: 1200px。c3肯定不会自动收缩的，也就是说c3根本不具备 flex-shrink和flex-grow。
接下来说说 c1 为什么没有了，因为c1默认是 flex-shrink: 1的，也就是说会自动收缩的，那么c2要占据1200px的大小（因为内容1200px的c3不会变，上面说过了），所以只能让 c1 为 0 了，全部缩没了。
再来说说为什么添加overflow:hidden就好了，因为1200px溢出隐藏了，导致 c2 没有变成1200px的大小，这样在弹性下就会平均分配宽度给c1和c2。
00
相似问题