Таблица игнорирует высоту в Grid и / или Flexbox с Bootstrap 4

Question

Итак, я создаю своего рода панель инструментов, где вы можете видеть все элементы одновременно, поэтому я не хочу, чтобы страница прокручивалась.

Код и кодовая ручка ниже показывают макет страницы,которого он должен придерживаться.<table> не может быть выше, чем есть.Поэтому, если в таблице слишком много строк, она должна прокручиваться.

Однако, независимо от того, куда я поместил .overflow-auto или даже overflow-y: scroll для любого из дочерних элементов <table>, самого себя или его родителя, он будет расти и заполнять весь экран.

Я также видел упомянутое вокруг, что <table> растет, потому что у него нет определенной высоты, так как у его родителя тоже нет.Но предоставление каждой (max-) высоты 100% также не решает проблему.

В любом случае можно убедиться, что таблица не растет, сохраняя все относительно (например, используя grid / flexbox и неустановить его с помощью px или rem)?

Кроме того, это внутренний инструмент, который будет использоваться только в Chrome, поэтому нет необходимости в обратной совместимости.

Вот код:

/* css */
#footer {
  grid-column: 1/span 2;
}

.grid {
  display: grid;
  grid-template-rows: 3rem 3fr 1fr;
  grid-template-columns: 9fr 3fr;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>

<!-- html body -->
<div class="container-fluid vh-100 grid">
    <div class="border"></div>
    <div class="border"></div>
    <div class="border"></div>
    <div class="border"></div>
    <div class="d-flex" id="footer">
        <div class="btn-group-vertical btn-group-toggle" role="group">
            <label class="text-uppercase btn btn-secondary">
                <input name="view" type="radio"/>foobar
            </label>
            <label class="text-uppercase btn btn-secondary">
                <input name="view" type="radio"/>barfoo
            </label>
        </div>
        <!-- adding .overflow-auto to any of the-->
        <!-- below elements doesn't help-->
        <div class="flex-grow-1">
           <table class="table table-bordered table-hover">
               <thead>
                   <tr>
                       <th class="sticky-top">Foo</th>
                       <th class="sticky-top">Bar</th>
                   </tr>
               </thead>
               <tbody>
                  <tr>
                      <td>fud</td>
                      <td>baz</td>
                  </tr>
                  <!-- <tr> block repeated many more times -->
               </tbody>
           </table>
       </div>
   </div>
</div>

А вот пример кода с указанным выше кодом:

См. Проблему с таблицей прокрутки от ABuffSeagull ( @ABuffSeagull ) на CodePen .

Answer 1

Благодаря @ G-Cyr, по-видимому, исправление заключается в добавлении overflow-hidden к #footer и overflow-auto к родительскому элементу <table>, и это работает.

Answer 2

Я не мог придумать способ исправить вашу проблему без установки значений на странице: (

Я что-то запустил, но не думаю, что вы хотите: CodePen

#footer
    height: 40vh

.flex-grow-1
    overflow: auto

.table thead th
    background: white
    box-shadow: 1px 1px 5px #dee2e6