title: max-height: 100% div within complex layout
body: <p>I have a weird CSS issue I cannot get my head around.
  My page has a rather complex layout with fixed header and footer and a flexible content-area.</p>
  
  <p>Now within this content area, I would like to create scrollable div, that by default uses the full height of the outer container, but not more.</p>
  
  <p>Everything works fine with the scrollable div being the only element between header and footer.</p>
  
  <p><a href="http://www.hacksrus.net/files/demo.html" rel="nofollow">Working demo</a></p>
  
  <p>Unfortunately however, as soon as I put the scrollable div inside a simple fixed-width container to center it on the page, the browser sizes it according to it's inner content, so that is not scrollable anymore, but the lower content disappears because of the outer div's <em>overflow: hidden</em>.</p>
  
  <p><a href="http://www.hacksrus.net/files/demo_with_container.html" rel="nofollow">Non-working demo</a></p>
  
  <p>Any help is very much appreciated, I've literally spend the last days trying to figure this out.</p>
  
  <p>Thank you,</p>
  
  <p>Pascal</p>
  
  <h2>Solution</h2>
  
  <p>As I am unfortunately not allowed to answer my own question, here is the solution that worked for me:</p>
  
  <p>I was able to solve the problem by giving the <code>#container</code> a <code>height</code> of <code>100%</code>.
  The result can be seen here: www.hacksrus.net/files/demo_working.html (I was not allowed to post another hyperlink either.. ;-))</p>
  
  <p>I would very much appreciate if <strong>someone could explain the reason</strong> for this!</p>
  
  <p>Thank you for your help!</p>