title: Sticky flexible footers and headers CSS working fine in WebKit, but not in Gecko
body: <p>I'm attempting to build a layout that allows a flexible height header and footer, with a section in the middle consuming the remaining space. Any overflow in the middle should give a scroll bar just for this middle section.</p>
  
  <p>The code I have that works fine for Safari and Chrome is:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;style&gt;
        html, body {
          margin: 0;
          padding: 0;
          height: 100%;
        }
  
        .l-fit-height {
          display: table;
          height: 100%;
        }
  
        .l-fit-height &gt; * {
          display: table-row;
          height: 1px;
          background-color: red;
        }
  
        .l-fit-height-expanded {
          height: auto;
          background-color: blue;
          display: table-row;
        }
  
        .l-scroll-content {
          height: 100%;
          overflow-y: auto;
        }
      &lt;/style&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;div class="l-fit-height"&gt;
        &lt;section&gt;
          Header
        &lt;/section&gt;
        &lt;section class="l-fit-height-expanded"&gt;
          &lt;div class="l-scroll-content"&gt;
            &lt;p&gt;Foo&lt;/p&gt;
            &lt;p&gt;Foo&lt;/p&gt;
            &lt;p&gt;Foo&lt;/p&gt;
            &lt;p&gt;Foo&lt;/p&gt;
            &lt;p&gt;Foo&lt;/p&gt;
            &lt;p&gt;Foo&lt;/p&gt;
            &lt;p&gt;Foo&lt;/p&gt;
            &lt;p&gt;Foo&lt;/p&gt;
            &lt;p&gt;Foo&lt;/p&gt;
            &lt;p&gt;Foo&lt;/p&gt;
            &lt;p&gt;Foo&lt;/p&gt;
            &lt;p&gt;Foo&lt;/p&gt;
            &lt;p&gt;Foo&lt;/p&gt;
            &lt;p&gt;Foo&lt;/p&gt;
            &lt;p&gt;Foo&lt;/p&gt;
          &lt;/div&gt;
        &lt;/section&gt;
        &lt;section&gt;
          Footer
        &lt;/section&gt;
      &lt;/div&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>I cannot for the life of me figure out why the behaviour is different in Firefox. The content in the middle will expand height correctly, but will not shrink more than the height of the contents.</p>
  
  <p>It's difficult to know what is the correct behaviour. Any ideas?</p>
  
  <p><em>Edit</em></p>
  
  <p>Similar example setup here: <a href="http://jsfiddle.net/t3mZF/" rel="noreferrer">http://jsfiddle.net/t3mZF/</a></p>
  
  <p>Interestingly if <code>.l-fit-height-row-content</code> is changed to <code>display: table-cell</code> then WebKit and Gecko exhibit the same behaviour or ignoring the overflow.</p>
  
  <p>If <code>display: block</code> is used then WebKit gives desired behaviour (a scroll bar and footer remains at bottom of view port), but Firefox refuses to add the scroll bars and instead pushes the footer off the bottom of the screen (scroll bar on view port - not the middle content).</p>
  
  <p>I've also opened a <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=794644" rel="noreferrer">bugzilla ticket</a></p>