title: Exact height div with scrollable bottom div, in CSS only?
body: <p>I'm trying to create a scrollable "widget". A simplified form of which is below.</p>
  
  <ol>
  <li>The widget (<code>container</code>) should be a fixed height, 200px. </li>
  <li>The <code>top</code> of the widget should <strong>not</strong> have a fixed height.</li>
  <li>The <code>bottom</code> of the widget should fill the remaining height, any overflow should automatically show a scrollbar if needed.</li>
  </ol>
  
  <p>I believe that this should be possible in CSS only. However, all the Googling that I have done seems to always use fixed heights for some part of the inner workings. This is not what I require.</p>
  
  <p>I am aware that this can be achieved in Javascript. Again, this is not what I want.</p>
  
  <p>Any ideas on how this can be achieved?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.container {
    height: 200px;
    max-height: 200px;
    width: 100%;
    overflow: hidden;
  }
  .top {
    background-color: #aaaaaa;
  }
  .bottom {
    background-color: #aaaaff;
    overflow: auto;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="container"&gt;
    &lt;div class="top"&gt;
      This content could
      &lt;br/&gt;well vary
    &lt;/div&gt;
    &lt;div class="bottom"&gt;
      At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia
      animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda
      est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis
      voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat."
    &lt;/div&gt;
  
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>