Bootstrap中设置overflow-auto的表格容器div无法滚动该如何解决

问题原因 #

• flex纵向布局中，仅设置flex-grow:1的容器默认不会限制内容高度，会被内部超出的内容撑开，导致子元素的overflow-auto没有明确的高度边界，无法触发滚动效果。
• 你使用的百分比高度类h-92在未设置固定高度的父容器中不会生效。

解决方法 #

调整后的代码如下，完全符合你要求的布局效果：

<div class="vh-90 d-flex flex-column">
    <div class="d-flex flex-column col-12 col-xl-5 col-lg-5 col-md-5 h-100 bg-primary">
      <fieldset class="border border-2 border-bottom-0 rounded-top">
        <legend class="w-auto px-2 float-none mb-0 fs-5 text-start">
          label
        </legend>
      </fieldset>
      <!-- 此处新增d-flex flex-column overflow-hidden -->
      <div class="flex-grow-1 border border-2 border-top-0 rounded-bottom d-flex flex-column overflow-hidden">
        <!-- 此处修改为flex-grow-1 去掉h-92 -->
        <div class="rounded overflow-auto flex-grow-1">
          <table
            class="table table-hover text-center rounded p-0 m-0"
          >
            <thead class="bg-primary text-white">
              <tr>
                <th class="fw-bold">name</th>
                <th class="fw-bold">age</th>
              </tr>
            </thead>
            <tbody>
              <tr class="">
                <td>marwan</td>
                <td class="text-danger">22</td>
              </tr>
              <tr class="">
                <td>marwan</td>
                <td class="text-danger">22</td>
              </tr>
              <tr class="">
                <td>marwan</td>
                <td class="text-danger">22</td>
              </tr>
              <tr class="">
                <td>marwan</td>
                <td class="text-danger">22</td>
              </tr>
              
              <tr class="">
                <td>marwan</td>
                <td class="text-danger">22</td>
              </tr>
              <tr class="">
                <td>marwan</td>
                <td class="text-danger">22</td>
              </tr>
              <tr class="">
                <td>marwan</td>
                <td class="text-danger">22</td>
              </tr>
              <tr class="">
                <td>marwan</td>
                <td class="text-danger">22</td>
              </tr>
              <tr class="">
                <td>marwan</td>
                <td class="text-danger">22</td>
              </tr>
              <tr class="">
                <td>marwan</td>
                <td class="text-danger">22</td>
              </tr>
            </tbody>
          </table>
        </div>
        <div class="col-8 d-flex justify-content-around mt-2 mb-2">
          <button class="py-1 px-0 btn primary-button col-5">button1</button
          ><button class="py-1 px-0 btn primary-button col-5">button 2</button>
        </div>
      </div>
    </div>
</div>

修改说明 #

1. 外层根容器从vh-100改为vh-90，满足你90视口高度的要求
2. 包裹表格和按钮的父容器（带border的div）新增d-flex flex-column overflow-hidden：设置为纵向flex布局，同时添加overflow-hidden强制容器高度不会被内部内容撑开，给滚动提供明确高度边界
3. 包裹表格的div移除自定义高度类h-92，新增flex-grow-1：自动占满父容器除按钮区域外的全部高度，配合overflow-auto即可在内容溢出时自动出现滚动条
4. 按钮区域不需要额外设置高度，会自动按照自身内容高度占位，占满剩余空间。

内容的提问来源于stack exchange，提问作者Marwan-Ezzat