请稍等 ...

神奇的flex-grow

老师你好，本节的视频里面讲解的都是容器宽度大于子项宽度的情况，但是今天我突然遇到一个问题，其简化代码为:

<!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的代码就那么一点点，让人感觉很简单，但是卡住了又会卡很久，真的很让人沮丧.

慕莱坞0998854 2022-07-11 00:39:10

源自：4-10 flex-grow扩展比例

566

收起

提交取消

1回答

西门老舅 2022-07-11 12:47:57

你好，

首先 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。

0 回复有任何疑惑可以回复我~

收起回答