html - 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高于视图本身时，它与 and 重叠，header/navbar并且footer突然header/navbar不继承其子元素的高度。

例子：

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

标签： htmlcsssafariflexbox

Answer 1

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