title: Stick element A to top and B to bottom without position: absolute
body: <p>Following layout</p>
  
  <pre><code>-----
    A
  -----
  WHITE
  WHITE
  WHITE
  -----
    B
  -----
  </code></pre>
  
  <p>In order to achieve this layout I can use</p>
  
  <pre><code>position: absolute;
  top/bottom: 0;
  </code></pre>
  
  <p>Works fine, the problem is, Element A can grow. So with <code>position: static</code> it works how it should: Element B can grows, the div gets some scrolling if not all of it can be displayed anymore and Element A can still be seen as part of the scrolling.</p>
  
  <p>When I apply my CSS rules though, Element B grows until Element A is covered by B. Z-Index won't help here, so I pretty much want the standard behavior with <code>position: static</code>.</p>
  
  <p>Is there any other way? I was thinking of a middle white element which keeps shrinking as B grows.</p>