title: Children element with height: 100% getting pushed by siblings
body: <p>I have a very simple structure:</p>
  
  <pre><code>&lt;div class="parent"&gt;
      &lt;h1&gt;Element taking space&lt;/h1&gt;
      &lt;div class="stretch"&gt;
          Not much content, but needs to be stretched to the end.
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The parent <code>div</code> has a set height, and I want <code>div.stretch</code> to stretch all the way to that height, regardless of how little content it has. Using <code>height: 100%</code> does the trick, until you add some other element which pushes the content down.</p>
  
  <p>I guess that specifying <code>height: 100%</code> means that the element should have the exact same absolute/computed height as the parent element, and not <strong>the remainder of the height after all the other elements have been computed</strong>.</p>
  
  <p>Setting <code>overflow: hidden</code> obviously hides the overflowing content, but that's not an option for me.</p>
  
  <p>Is there any way I can achieve that in pure CSS?</p>
  
  <p><kbd><a href="http://jsbin.com/edibay/1/edit" rel="noreferrer"><strong>Demo of my problem</strong></a></kbd></p>