设置height为0的flex子项疑问：flex-grow生效时height为何失效？

Hey，我刚好碰到过类似的问题，来给你拆解下为什么你的height属性看起来没起作用～

核心原因：Flex布局的空间分配逻辑优先级更高 #

当你给flex子项设置flex-grow: 1时，flex容器（也就是你的.content，它是flex-direction: column的竖排容器）会优先按照flex属性来分配空间，而不是直接遵循子项的height设置。

具体来说：

• .content的固定高度是400px，每个子项只有一个且设置了flex-grow: 1，这意味着子项会完全填满容器的所有可用空间——不管你给子项设的height是0、100px还是900px，flex-grow都会强制让它撑满400px的容器高度。
• 比如#item3你设了height: 900px，但因为容器只有400px，flex布局会自动压缩它到容器高度；而#item1的height: 0会被flex-grow拉伸到400px。

解决方案：根据需求调整flex属性 #

下面是几种常见场景的调整方案，你可以按需选择：

1. 让子项完全遵循自身height设置，不填充剩余空间

只需要把flex-grow: 1改成flex-grow: 0，这样flex布局就不会强制拉伸/压缩子项，子项会按照自己的height显示，剩余空间会留白（如果height小于容器）或者溢出容器（如果height大于容器）：

#container { display: flex; justify-content: space-around; width: 100%; }
.content { border: 1px solid black; display: flex; flex-direction: column; height: 400px; width: 400px; }
#item1 { background-color: red; flex-grow: 0; height: 0; }
#item2 { background-color: green; flex-grow: 0; height: 100px; }
#item3 { background-color: blue; flex-grow: 0; height: 900px; }

2. 限制子项高度不超过容器，超出部分隐藏/滚动

如果想让子项在height小于容器时正常显示，大于容器时被限制在容器内，可以给子项加max-height: 100%，同时保持flex-grow: 0，再给容器加overflow属性控制溢出行为：

#container { display: flex; justify-content: space-around; width: 100%; }
.content { 
  border: 1px solid black; 
  display: flex; 
  flex-direction: column; 
  height: 400px; 
  width: 400px; 
  overflow: auto; /* 超出时显示滚动条，也可以设为hidden直接隐藏 */
}
#item1 { background-color: red; flex-grow: 0; height: 0; }
#item2 { background-color: green; flex-grow: 0; height: 100px; }
#item3 { background-color: blue; flex-grow: 0; height: 900px; max-height: 100%; }

3. 先按基准高度显示，再填充剩余空间（多子项场景更实用）

如果想让子项先保留一部分固定高度，再填充容器剩余空间，可以用flex-basis代替height（flex-basis是flex布局的基准尺寸，优先级更高），结合flex-grow: 1实现：

/* 举个多子项的例子，单个子项的话还是会撑满容器 */
.content { 
  border: 1px solid black; 
  display: flex; 
  flex-direction: column; 
  height: 400px; 
  width: 400px; 
}
#itemA { background-color: red; flex-basis: 100px; flex-grow: 1; } /* 先占100px，剩余300px全部分配给它 */
#itemB { background-color: green; flex-basis: 100px; flex-grow: 1; } /* 和itemA平分剩余空间，最终各占200px */

总结 #

flex布局中，flex-grow的核心作用就是分配容器的剩余空间，所以它的优先级会高于直接设置的height。如果要让height生效，关键是调整flex-grow的值，或者用flex-basis来定义flex子项的基准尺寸。

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