Таблица стилей с использованием flex

Question

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

Мне удается это сделатьоборачивая таблицу внутри div и назначая статическую высоту этому div, например:

.example-container {
  height: 800px;
  overflow: auto;
}

Но когда я пытаюсь использовать flex, таблица просто перегружает доступную высоту:

.example-container {
  flex: auto;
  overflow: auto;
}

Пожалуйста, взгляните на проект, который я создал в Stackblitz

Любой совет будет принят с благодарностью.

Answer 1

Вам нужно будет определить какую-то высоту в вашем контейнере, чтобы это работало.Это будет 90% от вертикальной высоты браузера.

.example-container {
  height: 90vh;
  overflow: auto;
}

Обновление

Вот решение с использованием flex

.example-container {
  flex-grow: 1; 
  flex-basis: 90vh;
  overflow: auto;
}