嵌套Flexbox搭配overflow:auto/滚动条失效问题求解

问题核心 #

嵌套Flex布局失效的关键原因是：column方向的Flex容器子元素默认min-height: auto，当内部内容过长时，中间的Flex容器会被内容撑开，而非继承父容器分配的剩余高度，导致flex:1和overflow:auto无法触发预期的滚动效果。

解决方案 #

给所有嵌套的Flex容器添加min-height: 0（或overflow: hidden，二者原理一致，都是打破min-height:auto的默认限制），同时确保最外层容器正确设置高度并启用Flex布局，保证高度能逐层传递。

修正后的代码 #

CSS

.wrapper-outer {
  height: 100px;
  display: flex;
  flex-direction: column; 
}

.wrapper {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0; /* 关键：强制容器遵循父级高度限制 */
}

.bottom {
  flex: 1;
  overflow: auto;
}

HTML

<div class="wrapper-outer">
  <div>sth</div>
  <div class="wrapper">
    <div>sth</div>
    <div class="bottom">
      "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"
    </div>
  </div>
</div>

原理说明 #

• min-height:0 强制Flex容器忽略内部内容的高度，严格遵循父容器分配的空间，让flex:1能正确占据剩余高度。
• 外层容器必须明确设置高度并启用Flex布局，确保高度约束能逐层传递到嵌套的子容器中。

内容的提问来源于stack exchange，提问作者Minh Nghĩa