title: Safari Flexbox: Navigation doesn't get height from children if content is too high
body: <p>I have the following <code>HTML</code> structure for my application:</p>
  
  <pre><code>body
    viewport
      navbar
      container
        content
      footer
  </code></pre>
  
  <p><code>viewport:</code></p>
  
  <pre><code>min-height: 100vh;
  max-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  
  </code></pre>
  
  <p><code>navbar/header:</code></p>
  
  <pre><code>background: #fff;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 20;
  align-items: flex-start;
  </code></pre>
  
  <p><code>container:</code></p>
  
  <pre><code>flex-grow: 1;
  width: 100%;
  padding: 0 15px;
  margin: 0 auto;
  </code></pre>
  
  <p>My problem exists only in <code>Safari</code>, so that when the <code>content</code> is higher than the view itself, it overlaps with the <code>header/navbar</code> and <code>footer</code> and suddenly the <code>header/navbar</code> doesn't inherit the height of it's children elements.</p>
  
  <p>Example:</p>
  
  <p><a href="https://i.stack.imgur.com/GL1nT.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/GL1nT.png" alt="good case"></a></p>
  
  <p><a href="https://i.stack.imgur.com/BzH8e.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/BzH8e.png" alt="bad case"></a></p>
  
  <p>I had a look at flexbugs and tried to give <code>flex: 1 1 0</code>, <code>flex: auto</code>, <code>height:100%</code> and so on but nothing worked.</p>