Bootstrap侧边栏内容溢出无滚动条，如何实现可滚动？

核心原因 #

滚动容器生效的前提是自身有明确的高度限制，同时父容器没有截断其高度计算。你当前的设置问题在于：侧边栏（列表组的父元素）未被限制高度，导致列表组的overflow-y:auto无法感知到内容溢出，只会被父容器截断。

具体实现步骤 #

1. 用Bootstrap类构建完整的高度约束链 #

从根节点到侧边栏的每一层容器，都需要添加h-100类，确保高度能传递到侧边栏：

• 给<html>、<body>添加h-100，让页面整体占满视口高度
• 给侧边栏的直接父容器（比如.row、.container-fluid）也添加h-100

2. 配置侧边栏内部布局 #

给侧边栏容器添加以下类：

• d-flex + flex-column：让侧边栏内元素按垂直方向排列，确保列表组能自动填充剩余空间
• h-100：让侧边栏高度占满父容器

3. 给列表组添加滚动触发类 #

给列表组添加两个关键类：

• flex-grow-1：让列表组占据侧边栏内的剩余垂直空间
• overflow-y-auto：Bootstrap内置滚动类，内容溢出时自动显示滚动条

4. 调整main元素的冗余样式 #

移除给main添加的overflow-y: hidden，除非你明确需要隐藏主内容区的滚动，否则会干扰页面正常的高度计算。

示例代码结构 #

<html class="h-100">
<body class="h-100">
  <div class="container-fluid h-100">
    <div class="row h-100">
      <!-- 侧边栏 -->
      <aside class="col-3 h-100 d-flex flex-column p-3 bg-light">
        <h5>侧边栏标题</h5>
        <!-- 可滚动列表组 -->
        <ul class="list-group flex-grow-1 overflow-y-auto">
          <li class="list-group-item">项目1</li>
          <li class="list-group-item">项目2</li>
          <li class="list-group-item">项目3</li>
          <!-- 更多溢出内容... -->
        </ul>
        <div class="mt-3">
          <button class="btn btn-primary">底部操作按钮</button>
        </div>
      </aside>
      <!-- 主内容区 -->
      <main class="col-9 p-3">
        <!-- 主内容内容 -->
      </main>
    </div>
  </div>
</body>
</html>

关键注意点 #

• 高度约束链不能断，任何一层父容器缺失h-100都会导致侧边栏高度无法正确计算
• flex-grow-1是触发滚动的核心，它让列表组能“撑开”到侧边栏的剩余空间，内容超过这个空间时才会触发滚动条
• 尽量避免自定义CSS覆盖Bootstrap的内置类，除非特殊场景

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