title: CSS grid does not fit its parent div's height
body: <p>I built a CSS grid layout with a header, a sider and some scrollable content.</p>
  
  <p>I'm trying to test that layout in a container <code>div</code> where I'm setting the <code>width</code> and <code>height</code>.</p>
  
  <p>The layout responds well to the container's <code>width</code>, but not to the <code>height</code>, why is that and is there a way to fix it?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
    margin: 0;
  }
  
  .container {
    width: 70%;
    height: 300px; /* How can I set the height? */
  }
  .page {
    width: 100%;  
    display: grid;  
    grid-template-rows: 55px calc(100vh - 55px); /* height limitation on second row */
    grid-template-columns: 200px auto;
    grid-template-areas:
      "nav header"
      "nav content";
  }
  
  .nav {
    grid-area: nav;
    background-color: aqua;
  }
  
  .header {
    grid-area: header;
    background-color: grey;
  }
  
  .content {
    grid-area: content;
    background-color: red;
    overflow-y: auto; /* overflow condition on parent */
  }
  
  article {
    height: 1000px; /* height set on child; triggers scroll */
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="container"&gt;
    &lt;div class="page"&gt;
      &lt;div class="nav"&gt;Side nav&lt;/div&gt;
      &lt;div class="header"&gt;Header&lt;/div&gt;
      &lt;div class="content"&gt;
        &lt;article&gt;
          &lt;!-- new section for content --&gt;
          &lt;h1&gt;title&lt;/h1&gt;
          &lt;p&gt;A lot of content, simulated by .article height: 1000px&lt;/p&gt;
  
        &lt;/article&gt;
      &lt;/div&gt;
    &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>