title: CSS grid: content to use free space but scroll when bigger
body: <p>I've been working with <a href="https://www.w3.org/TR/css3-grid-layout/" rel="noreferrer">CSS Grid Layouts</a> for the first time and they're awesome. Right now, however, I'm having trouble keeping one of my grid cells under control.</p>
  
  <p>What I want is to have an element that takes up the existing free space and <em>no more</em>, scrolling when the content gets too big. My understanding is that a grid size of <code>1fr</code> takes up a uniform amount of the available space after everything else is calculated. I've tried various sizes such as <code>minmax(auto, 1fr)</code> but to no avail - <code>1fr</code> seems to expand to fit the content which is not what I want. Setting a maximum size size like <code>100px</code> is also no good because I want the size to be determined by other elements in the grid.</p>
  
  <p>Here's the example:</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>.container {
    display: grid;
    grid-template-rows: auto 1fr auto;
    grid-template-columns: 1fr 1fr;
  }
  
  .container&gt;div {
    border: 1px solid blue;
    border-radius: 5px;
  }
  
  .left {
    grid-column: 1;
    grid-row: 1/4;
  }
  
  .header {
    grid-column: 2;
    grid-row: 1;
  }
  
  .problem-child {
    grid-column: 2;
    grid-row: 2;
    overflow-y: scroll;
  }
  
  .footer {
    grid-column: 2;
    grid-row: 3;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="container"&gt;
    &lt;div class="left"&gt;left&lt;br&gt;I don't want this one to scroll&lt;br&gt;this should&lt;br&gt;determine&lt;br&gt;the height of the whole grid container&lt;/div&gt;
    &lt;div class="header"&gt;column header&lt;/div&gt;
    &lt;div class="problem-child"&gt;problem child:&lt;br&gt;I&lt;br&gt;want&lt;br&gt;this&lt;br&gt;to&lt;br&gt;scroll&lt;br&gt;rather&lt;br&gt;than&lt;br&gt;making&lt;br&gt;everything&lt;br&gt;tall&lt;/div&gt;
    &lt;div class="footer"&gt;column footer&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>What grid declaration (if any) can I use to let the "problem child" scroll on overflow rather than expanding?</p>