title: Nested CSS-grid implicitly fill remaining height from parent grid
body: <p>I am trying to have a child CSS-grid respect the dimensions of the parent grid. How would I be able to achieve that? </p>
  
  <p>I was initially writing something like this: </p>
  
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.site,
  body,
  html {
    padding: 0;
    margin: 0;
    height: 100%;
    width: 100%;
  }
  
  .parent-grid {
    display: grid;
    height: 300px;
    width: 300px;
    grid-template-rows: 30px 1fr;
    grid-template-columns: 1fr;
    grid-template-areas: 'nav' 'child';
    background-color: grey;
  }
  
  .nav {
    background-color: #0D47A1;
    grid-area: nav;
  }
  
  .child {
    grid-area: child;
  }
  
  .child-grid {
    display: grid;
    grid-template-rows: 1fr;
    grid-template-columns: 1fr;
    grid-template-areas: 'test';
    background-color: grey;
  }
  
  .content {
    background-color: red;
    overflow: auto;
    grid-area: test;
  }
  
  * {
    box-sizing: border-box;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="parent-grid"&gt;
    &lt;div class="nav"&gt;Sidebar&lt;/div&gt;
    &lt;div class="child"&gt;
      &lt;div class="child-grid"&gt;
        &lt;div class="content"&gt;
          &lt;div&gt;blah&lt;/div&gt;
          &lt;div&gt;blah&lt;/div&gt;
          &lt;div&gt;blah&lt;/div&gt;
          &lt;div&gt;blah&lt;/div&gt;
          &lt;div&gt;blah&lt;/div&gt;
          &lt;div&gt;blah&lt;/div&gt;
          &lt;div&gt;blah&lt;/div&gt;
          &lt;div&gt;blah&lt;/div&gt;
          &lt;div&gt;blah&lt;/div&gt;
          &lt;div&gt;blah&lt;/div&gt;
          &lt;div&gt;blah&lt;/div&gt;
          &lt;div&gt;blah&lt;/div&gt;
          &lt;div&gt;blah&lt;/div&gt;
          &lt;div&gt;blah&lt;/div&gt;
          &lt;div&gt;blah&lt;/div&gt;
          &lt;div&gt;blah&lt;/div&gt;
          &lt;div&gt;blah&lt;/div&gt;
          &lt;div&gt;blah&lt;/div&gt;
          &lt;div&gt;blah&lt;/div&gt;
          &lt;div&gt;blah&lt;/div&gt;
          &lt;div&gt;blah&lt;/div&gt;
          &lt;div&gt;blah&lt;/div&gt;
          &lt;div&gt;blah&lt;/div&gt;
          &lt;div&gt;blah&lt;/div&gt;
          &lt;div&gt;blah&lt;/div&gt;
          &lt;div&gt;blah&lt;/div&gt;
          &lt;div&gt;blah&lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I would like to have 'content' be a scrollable area that doesn't expand the height of the parent (so it should be '270px').</p>