Bootstrap 5：如何让含flex-grow-1类的div实现滚动

你的问题核心是滚动容器没有明确的高度上限，导致overflow-auto无法触发滚动，反而让文档整体拉伸。以下是不需要固定像素高度的可扩展解决方案：

关键修复步骤 #

1. 给根节点设置高度基准 #

Bootstrap的h-100依赖父级高度，所以需要先让html和body占满视口高度：

<html class="h-100">
<body class="h-100 d-flex flex-column">
  <!-- 页面内容 -->
</body>
</html>

2. 确保中间层容器传递高度 #

你的最外层.row用了flex-grow-1，但它的父容器需要是flex布局且有高度，这样flex-grow-1才能占满剩余空间。比如给.row的父容器添加h-100 d-flex flex-column：

<div class="h-100 d-flex flex-column">
  <div class="row no-gutters w-100 flex-grow-1">
    ...
  </div>
</div>

3. 清理内层不必要的.container嵌套 #

Bootstrap的.container/.container-fluid类自带padding和布局规则，嵌套在flex子容器里会干扰高度计算。把右侧列内的.container替换为简单的间距类（比如p-3）即可。

修改后的完整代码 #

<html class="h-100">
<body class="h-100 d-flex flex-column">
  <div class="h-100 d-flex flex-column">
    <div class="row no-gutters w-100 flex-grow-1">
      <div class="col-8">
        <div id="playarea" class="container-fluid border-top border-end h-100 px-0">
          <!-- Cards go here -->
        </div>
      </div>
      <div class="col-4">
        <div class="h-100 d-flex flex-column border rounded-top p-3">
          <div class="d-flex mb-0">
            <h5 class="flex-grow-1">Side Content</h5>
          </div>
      
          <hr class="border mt-2 mb-3">
      
          <div class="d-flex mb-3">
            <!-- Non-scrollable search area -->
          </div>
      
          <div class="flex-grow-1 overflow-auto">
            <!-- Scrollable content goes here -->
          </div>
      
          <div class="card mt-2 bg-light mb-3" id="info-panel">
            <div class="card-body">
              <!-- Non-scrollable info box -->
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
</html>

核心原理说明 #

• h-100让容器占满父级高度，配合d-flex flex-column实现垂直方向的flex布局
• flex-grow-1让滚动容器自动填充剩余可用空间，当内容超出这个空间时，overflow-auto就会生成滚动条
• 去掉不必要的.container嵌套，避免布局规则冲突导致高度计算错误

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