title: Height of div container defined with 100vh is too big (look as it orientates itself on window size)
body: <p>I define a grid in css as follows:</p>
  
  <pre class="lang-css prettyprint-override"><code>.main {
      display: grid;
      /*
      ¦-------------------------------------------------------------¦
      ¦ Header                                                      ¦
      ¦-------------------------------------------------------------¦
      ¦ Structures ¦ Main (ortho-viewer)                            ¦
      ¦            ¦                                                ¦
      ¦            ¦                                                ¦
      ¦-------------------------------------------------------------¦
      ¦ Footer                                                      ¦
      ¦-------------------------------------------------------------¦
       */
      grid-template-columns: 25vw 75vw ;
      grid-template-rows: 8vh 84vh 8vh;
  }
  .header {
      grid-column: 1 / 3;
      grid-row: 1;
      padding: 20px;
  }
  .ortho-viewer {
      grid-column: 2;
      grid-row: 2;
  }
  .structures{
      grid-column: 1;
      grid-row: 2;
      border-top: 1px solid black;
      border-bottom: 1px solid black;
      padding: 10px;
      overflow: auto;
  }
  .structures h3 {
      margin: 20px;
  }
  .footer {
      grid-column: 1 / 3;
      grid-row: 3;
      padding: 20px;
  }
  </code></pre>
  
  <p>I also defined the box model to make sure I do not face a problem with padding and margins:</p>
  
  <pre class="lang-css prettyprint-override"><code>html {
     box-sizing: border-box;
   }
   *,
   *:before,
   *:after {
     box-sizing: inherit;
   }
  </code></pre>
  
  <p>But the resulting layout exceeds the viewport height and scrollbar is shown. What do I need to do to get the expected grid configuration?</p>