html - Safari flex 盒 : Navigation doesn't get height from children if content is too high

Question

我的应用程序有以下 HTML 结构:

body
  viewport
    navbar
    container
      content
    footer

视口(viewport):

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

导航栏/标题:

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

容器:

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

我的问题只存在于 Safari 中，因此当 content 高于 View 本身时，它会与 header/navbar 重叠和 footer 突然 header/navbar 不继承它的子元素的高度。

例子:

我查看了 flexbugs 并尝试提供 flex: 1 1 0、flex: auto、height:100% 等等上，但没有任何效果。

Answer 1

我通过将 min-height: fit-content; 添加到页眉和页脚样式表来解决这个问题。