title: Browser doesn't calculate height correctly with display: flex inside position: fixed
body: <p>I encountered a little problem while creating a modal in Angular. The container box has <code>position: fixed</code>, <code>width: 100vw</code> and <code>height: 100vh</code> in order to cover all the screen. The content has <code>display: flex</code> to align its own content vertically. But the two properties don't look like working properly if used together.</p>
  
  <p><a href="https://stackblitz.com/edit/angular-yr1p4q?file=src%2Fapp%2Ftpd-squared-modal%2Ftpd-squared-modal.component.html" rel="nofollow noreferrer">Here is a stackblitz snippet</a> to reproduce the bug.</p>
  
  <p>Troubles start when I resize the browser vertically and the content doesn't fit anymore in the viewport. The scrollbar appears as expected, but in place of starting from the top, it starts from the middle of the element, and I tried inspecting it for hours without understanding why it does happen.</p>
  
  <p>How can I fix it keeping <code>display: flex</code>?</p>
  
  <p>Here is some relevant code:</p>
  
  <pre><code>:host { /* modal container*/
      position: fixed;
      left: 0;
      top: 0;
      width: 100vw;
      height: 100vh;
      z-index: 100;
      align-items: center;
      justify-content: center;
  }
  
  .box-container { /* div used only to make the scrollbar appear */
      height: 100%;
      display: flex; /* comment this line to make it work */
      align-items: center;
      justify-content: center;
      overflow-y: auto;
      overflow-x: hidden;
  }
  </code></pre>
  
  <hr>
  
  <p><strong>EDIT</strong></p>
  
  <p>I'm still looking for a solution, read the comment</p>