flex布局下如何实现可滚动div且高度不导致父元素溢出？

核心逻辑 #

Flex 布局默认规则中，弹性子元素的min-height属性默认值为auto，会优先适配内容实际高度，哪怕父容器设置了高度限制也会被内容撑开溢出，只要打破这个默认规则就能实现目标效果，无需强制给父元素写死max-height: 100vh。

具体操作步骤 #

• 给最外层的d-flex flex-column父容器添加min-h-0 Bootstrap 工具类，或者手动写入样式min-height: 0，保证父容器高度不会被子元素内容强行撑开。
• 无需修改 navbar 所在子元素的原有配置。
• 给带有container-fluid flex-grow-1的第二级子容器，同样添加min-h-0类，保留flex-grow:1配置，同时移除这一层的overflow: auto样式（如果之前加了的话）。
• 找到你需要滚动的 column1 对应的外层包裹容器，给它添加d-flex flex-column类，再给 column1 元素本身添加以下配置：
  • Bootstrap 类flex-grow-1、overflow-y-auto
  • 补充样式min-height: 0
• 如果 column1 外层还有嵌套的行/列容器，逐层给涉及的 flex 子元素都加上min-h-0即可。

最简代码示例 #

// 最外层父容器
<div className="d-flex flex-column min-h-0 h-100">
  {/* navbar 子元素 */}
  <Navbar bg="light">
    <Navbar.Brand href="#home">导航栏</Navbar.Brand>
  </Navbar>
  {/* 第二级容器 */}
  <div className="container-fluid flex-grow-1 min-h-0">
    <Row className="h-100">
      <Col className="d-flex flex-column">
        {/* 要滚动的column1 */}
        <div className="flex-grow-1 overflow-y-auto min-h-0">
          {/* 超长内容放在这里 */}
          {Array.from({length:100}).map((_,i)=><p key={i}>内容行{i}</p>)}
        </div>
      </Col>
      <Col>
        {/* 其他不需要滚动的内容 */}
      </Col>
    </Row>
  </div>
</div>

注意：要保证最外层父元素的上层节点直到<body>、<html>标签都设置了height: 100%，否则高度继承会失效，你可以在全局样式中添加如下配置：

html, body, #root {
  height: 100%;
  margin: 0;
}

内容的提问来源于stack exchange，提问作者Zeno Dalla Valle