title: Fill out remaining div-height using only CSS
body: <p>I have two div:s in a container.<br>
  The first div should have auto height, taking whatever space is required.<br>
  The second div should have the remaining height of the container.</p>
  
  <p>I wish to do this without using Javascript.</p>
  
  <p>Isn't there any CSS-only solution? Maybe by utilizing <code>display:table</code>/<code>display:table-cell</code> or <code>display:flex</code>?</p>
  
  <p><em>Non-working example</em></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;title&gt;Stretch&lt;/title&gt;
  &lt;style type="text/css"&gt;
      html { height: 100%; }
      body {
          padding: 0 0;
          margin: 0 0;
          height: 100%;
          background: grey;
      }
      #container { background: pink; }
      #autoHeight { background: blue; }
      #remainingHeight { background: green; }
  &lt;/style&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;div id="container"&gt;
          &lt;div id="autoHeight"&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit,
              sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
              Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
              nisi ut aliquip ex ea commodo consequat.&lt;/div&gt;
  
          &lt;div id="remainingHeight"&gt;This div should fill out the rest, making the display
              mainly green. And no, I don't mean to just have green background. It will
              contain other things.&lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>