flex-grow属性未正常生效：设置flex-grow:0的子元素宽度为何减小

你只配置了flex-grow: 0，没有控制flex布局的收缩属性flex-shrink，这是核心原因：

• flex-grow 仅控制父容器有剩余空间时，子元素如何分配多余空间，默认值为0，即不参与分配剩余空间，不会主动扩张
• flex-shrink 控制父容器空间不足时，子元素如何收缩来适配容器，默认值为1，即所有子元素默认都会按比例收缩来避免溢出

你当前的场景里，给child2不断添加文本后，两个子元素的内容总宽度超过了父容器的400px宽度，child1的flex-shrink为默认值1，自然会跟着收缩，和flex-grow是不是0没有关系。

要让child1宽度固定不变，只要显式关闭它的收缩属性即可：

.child1 {
  width: 100px;
  flex-grow: 0;
  /* 新增这一行，禁止收缩 */
  flex-shrink: 0;
  background: red;
}

也可以直接用flex简写属性一次性配置，可读性更高：

.child1 {
  /* 三个值分别对应 flex-grow:0, flex-shrink:0, flex-basis:100px */
  flex: 0 0 100px;
  background: red;
}

内容的提问来源于stack exchange，提问作者ChenLee