Bootstrap 5/Flex复杂响应式菜单溢出内容添加滚动条问题求教

解决方案 #

你添加overflow-y: auto不生效的核心原因是flex布局下子元素默认min-height: auto，会优先跟随内容高度撑开容器，只要做以下小修改就能实现需求，不需要调整原有布局逻辑：

1. 给所有作为flex子项的自适应高度容器添加Bootstrap内置类min-h-0，覆盖默认的min-height: auto规则
2. 给需要出现滚动条的内容区域添加overflow-y: auto样式即可

修改后完整代码 #

<div class="row h-100">
  <div class="col d-flex flex-column h-100">
    <!-- 顶部固定高度区域 -->
    <div class="row justify-content-center bg-primary">
      <div class="text-white">
        <div style="height:30px">Fixed height</div>
      </div>
    </div>
    <!-- 下方自适应高度区域 -->
    <div class="row justify-content-center bg-secondary flex-grow-1 min-h-0">
      <!-- 左侧固定宽度菜单 -->
      <div class="col-auto ms-auto bg-grey overflow-y-auto">
        <div class="row">
          <div class="col-12" style="width: 60px">
            Fixed width
            <!-- 此处添加大量内容会自动出现滚动条 -->
          </div>
        </div>
      </div>
      <!-- 右侧响应式内容区 -->
      <div class="col d-flex flex-column min-h-0">
        <div class="row flex-grow-1 min-h-0">
          <div class="col-12 col-xl-6 bg-success overflow-y-auto">
            Responsive Col 1
            <!-- 此处添加大量内容会单独出现滚动条 -->
          </div>
          <div class="col-12 col-xl-6 bg-danger overflow-y-auto">
            Responsive Col 2
            <!-- 此处添加大量内容会单独出现滚动条 -->
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

如果需要让左右两个响应式列共用一个滚动条，只需要把overflow-y: auto加在两个列的父级row上即可。

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