溢出自动没有使 div 可滚动引导

Question

我有两个 div 包含在一个 div 中，第一个 div 包含一个表格，第二个包含按钮。我想让表格可滚动的 div 所以我在那个 div 上使用了 overflow-auto 并且它不起作用我认为问题可能出在另一个使用 flex-frow-1 的父 div 但无法弄清楚 这是我的代码：

<div class="vh-100 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>
      <div class="flex-grow-1 border border-2 border-top-0 rounded-bottom">
        <div class="rounded overflow-auto h-92">
          <table
            class="table table-hover text-center rounded p-0 m-0 overflow-auto"
          >
            <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">
          <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>

我想要达到的目标如下： 有一个具有特定高度的 div 让我们说 90vh 里面有一个 div 占 90vh div 的 100% 里面有 2 个 div，第一个高度是 100% div 的 90%，当里面的项目溢出时，它通过使 div 可滚动来处理这个问题 另一个取剩余的高度

Answer 1

使用boatstrap v4（v4.5.2 工作 100%）

并将高度小于表格容器的内容高度（自动溢出的 div）