Safari Flexbox: навигация не получает рост от детей, если содержание слишком высокое

Question

У меня есть следующая структура HTML для моего приложения:

body
  viewport
    navbar
    container
      content
    footer

viewport:

min-height: 100vh;
max-height: 100vh;
display: flex;
flex-direction: column;
overflow-x: hidden;

navbar/header:

background: #fff;
position: -webkit-sticky;
position: sticky;
top: 0;
z-index: 20;
align-items: flex-start;

container:

flex-grow: 1;
width: 100%;
padding: 0 15px;
margin: 0 auto;

Моя проблема существует только в Safari, поэтому, когда content выше, чем само представление, оно перекрывается с header/navbar и footer и внезапно header/navbarне наследует высоту дочерних элементов.

Пример:

Я посмотрел на flexbugs и попытался дать flex: 1 1 0, flex: auto, height:100% и т. Д., Но ничего не получилось.

Answer 1

Я исправил эту проблему, добавив min-height: fit-content; в таблицу стилей верхнего и нижнего колонтитула.