Прокручиваемый элемент с изгибом выталкивает другие элементы по мере роста

Question

Я пытаюсь создать страницу со следующим макетом:

+-------------------------------------------------------+
|                                                       |
|                           nav                         |
|                                                       |
+-------------------------------------------------------+
|                                                       |
|         content that should not scroll (fixed)        |
|                                                       |
+-------------------------------------------------------+
|                                                       |
|                                                       |
|                    Scrollable content                 |
|                taking up remaining height             |
|                                                       |
|                                                       |
|                                                       |
+-------------------------------------------------------+

Поскольку прокручиваемый контент должен занимать «оставшуюся высоту», я решил попробовать и использовать display: flex, чтобы попытаться решить эту проблему.

Я добавил следующий класс ко всем элементам от прокручиваемого содержимого до первого элемента (#app):

.flex {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

Сам прокручиваемый элемент имеет дополнительное свойство overflow-y: auto; CSS.

Верхний элемент #app обладает следующими свойствами, главное, высотой.

#app {
  position: absolute;
  top: 0;
  bottom: 0;
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;

  display: flex;
  flex-direction: column;
}

С этой настройкой я обнаружил, что с ростом прокручиваемого контента контент nav и fixed начинает расти все дальше и дальше.

Что вызывает это и как я могу предотвратить это? Я просто хочу страницу с некоторым фиксированным содержанием и элементом, который занимает оставшуюся высоту. Вот кодекс моей страницы

Answer 1

Прежде всего, с вашим подходом иметь все в flex-контейнерах, использование display: fixed на панели навигации приносит больше вреда, чем пользы, поскольку только последний div будет прокручиваться сам по себе, панель навигации останется на месте независимо от того, свиток Если навигационная панель имеет значение display: block, она больше не выводится из обычного контекста макета, и ее родительский гибкий контейнер может принимать свою высоту в регулярных вычислениях. Кроме того, по умолчанию для дочерних элементов flex значение flex-shrink установлено равным 1, что означает, что высота вашего контейнера tabs будет уменьшаться, как только общая высота всех дочерних элементов flex превысит высоту контейнера flex. Установка в 0 предотвращает эту проблему. Конечный результат со всеми вышеперечисленными исправлениями можно найти в разветвленном codepen .