title: Make inner div resize to fit its container given dynamic height footer below it
body: <p>I have two divs stacked vertically in a container div. The container div has <code>height: 100%</code>, and the bottom inner-div has dynamic height. I want the top div to take up the remaining space of the container, such that the bottom div is effectively fixed to the bottom of the viewport.</p>
  
  <pre><code>&lt;div class="container" style="height: 100%"&gt;
    &lt;div class="my-height-should-be-the-remainder-of-the-container" style="overflow: scroll"&gt;
      &lt;p&gt;My content should scroll if I become too small to show all of it&lt;/p&gt;
    &lt;/div&gt;
  
    &lt;div class="my-height-should-take-priority-over-the-top-div"&gt;
      &lt;p&gt;My height should dynamically change depending on my content&lt;/p&gt;
      &lt;p&gt;As a result, my content should never overflow&lt;/p&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I've tried using <code>display: table</code> with the inner divs as <code>display: table-row</code>, but can't get the top div to respect the <code>overflow: scroll</code>; it just pushes the bottom div outside of the viewport.</p>
  
  <p>I know I could use <code>position: fixed</code> on the bottom div, then use javascript to dynamically alter the <code>padding-bottom</code> of the top div, but would love to find a CSS-only solution, preferably one without flexbox.</p>
  
  <p>Thanks!</p>