如何避免flex-grow嵌套子元素撑高固定高度的flex父容器？

核心问题在于Flex布局中，设置了flex-grow: 1的子元素默认拥有min-height: auto属性，这会让元素优先适配内容高度，进而突破父元素的固定高度限制，导致所有祖先元素被撑开。

优化方法 #

不需要给所有中间嵌套元素添加overflow: auto，只需两步即可解决：

• 给所有使用flex-grow: 1的嵌套Flex子元素设置min-height: 0，打破默认的高度自适应行为，让它们严格遵循父元素的高度约束。
• 仅在最内层需要滚动的元素上设置overflow-y: auto（或overflow: auto），实现内容溢出时的滚动效果。

示例代码 #

/* 顶层父元素 */
.top-parent {
  height: 100vh;
  display: flex;
  flex-direction: column;
}

/* 所有flex-grow的嵌套子元素 */
.flex-grow-child {
  flex-grow: 1;
  min-height: 0; /* 关键属性 */
  display: flex;
  flex-direction: column;
}

/* 最内层内容容器 */
.inner-scroll {
  overflow-y: auto; /* 仅此处设置滚动 */
}

原理说明 #

min-height: 0会覆盖Flex子元素默认的min-height: auto，迫使元素不再优先适配内容高度，而是继承父元素的高度限制。此时最内层元素的内容超出时，只会在自身容器内滚动，不会向上传递撑高所有祖先元素。

这个方案相比给每个中间元素加overflow: auto更简洁，尤其在嵌套层级较多时，只需统一给flex-grow元素添加min-height: 0即可。

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