title: CSS - absolute within fixed with overflow for scrolling and 100% height
body: <p>I'm trying to have a scrollable overlay of some sort that blanks out the rest of the site.
  I can't seem to get 100% height on the absolute element within my fixed element.</p>
  
  <p><a href="http://codepen.io/intellix/pen/GBltK" rel="noreferrer">http://codepen.io/intellix/pen/GBltK</a></p>
  
  <pre><code>section {
    background: red;
    position: fixed;
    top:0;
    right:0;
    bottom:0;
    left:0;
    overflow-x:auto;
  
  }
  
  article {
    background: blue;
    position: absolute;
    top:0;
    width:300px;
    bottom: 0;
    left: 0;
  }
  </code></pre>
  
  <p>If I set bottom: 0; on the absolute element, it fills height when the page doesn't overflow. When the page overflows it leaves a gap.</p>
  
  <p>When I use bottom: auto on my absolute element it fills height with overflow, but leaves a gap without overflow!</p>
  
  <p>If you resize the window so the content fits and then resize so the content doesn't, you can see that it doesn't work in both cases.</p>