Запретить рост контейнера при добавлении записей

Question

Я пытаюсь отобразить список записей на странице. Проблема, с которой я сталкиваюсь в настоящее время, заключается в том, что, когда я добавляю новые записи в список, увеличивается размер страницы и добавляется полоса прокрутки. Но я не хочу, чтобы страница показывала результаты на полосе прокрутки, вместо этого я хочу полосу прокрутки внутри таблицы сетки и фиксирую высоту всего контейнера на высоте div.

Я не хочу фиксировать высоту div, поскольку у него было мало зависимостей. Я хочу, чтобы таблица записей не расширялась по мере добавления содержимого. Я смог добиться этого, установив высоту, вычислив vh и другие контейнеры на странице и установив высоту контейнера таблицы на 100%. Но я хочу, чтобы мы могли только обновить CSS без расчета. Как удаление flex, которое позволяет ему расти и т.д.

В таблице 3 деления. Заголовок таблицы, ее содержимое и нижний колонтитул. Мне нужна полоса прокрутки внутри верхнего и нижнего колонтитула, а не на веб-странице, которая увеличивает высоту страницы при добавлении записей

Ожидаемое поведение

Текущее поведение

Я попытался переполнить-y, чтобы прокрутить таблицу div, но безуспешно Высота пробовал 100%, прогибался - 0.

Может ли кто-нибудь указать на простое исправление CSS, которое может в конечном итоге исправить это?

Answer 1

Вы можете использовать css grid. Пример:

<style>
      .layout {
        height: 100vh;
        display: grid;
        grid-template-rows: 50px 1fr 50px;
      }
      .header {
        background: #ccc;
      }
      .content {
        overflow: auto;
      }
      .footer {
        background: #ddd;
      }
    </style>

HTML

<div class="layout">
      <div class="header">Header</div>
      <div class="content">Content</div>
      <div class="footer">Footer</div>
</div>