title: CSS Flex box. height and Firefox
body: <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>html,
  body {
    padding: 0;
    margin: 0;
    height: 100%;
    min-height: 100%;
  }
  
  body {
    display: flex;
    flex-direction: column;
    
  }
  
  header {
    flex: 1;
    height: 60px;
    background: lightblue;
    padding: 0;
    margin: 0;
  }
  
  header p {
    text-align: center;
  }
  
  .main-wrap {
    display: flex;
    flex: 1 1 auto;
    width: 1000px;
    background: lightgreen;
    margin: 0 auto;
    
    height: 100%;
  }
  
  
  
  .right-pane {
    display: inline-flex;
    flex: 1 1 auto;
    flex-direction: column;
    background: #76DAFF;
  }
  
  .right-head {
    text-align: center;
    height: 40px;
    flex: 1;
    background-color: #DDCA7E;
  }
  
  .right-body {
    background-color: #B9F;
    display: inline-flex;
    flex: 1 1 auto;
    overflow-y: auto;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;html&gt;
  
  &lt;body&gt;
    &lt;header&gt;
      &lt;p&gt;I am a fixed header&lt;/p&gt;
    &lt;/header&gt;
    &lt;div class="main-wrap"&gt;
     
      &lt;div class="right-pane"&gt;
        &lt;div class="right-head"&gt;
          &lt;p&gt;I am a fixed container&lt;/p&gt;
        &lt;/div&gt;
        &lt;div class="right-body"&gt;
          &lt;ul&gt;
            &lt;li&gt;Scroll me I am famous!&lt;/li&gt;
            &lt;li&gt;Scroll me I am famous!&lt;/li&gt;
            &lt;li&gt;Scroll me I am famous!&lt;/li&gt;
            &lt;li&gt;Scroll me I am famous!&lt;/li&gt;
            &lt;li&gt;Scroll me I am famous!&lt;/li&gt;
            &lt;li&gt;Scroll me I am famous!&lt;/li&gt;
            &lt;li&gt;Scroll me I am famous!&lt;/li&gt;
            &lt;li&gt;Scroll me I am famous!&lt;/li&gt;
            &lt;li&gt;Scroll me I am famous!&lt;/li&gt;
            &lt;li&gt;Scroll me I am famous!&lt;/li&gt;
            &lt;li&gt;Scroll me I am famous!&lt;/li&gt;
            &lt;li&gt;Scroll me I am famous!&lt;/li&gt;
            &lt;li&gt;Scroll me I am famous!&lt;/li&gt;
            &lt;li&gt;Scroll me I am famous!&lt;/li&gt;
            &lt;li&gt;Scroll me I am famous!&lt;/li&gt;
            &lt;li&gt;Scroll me I am famous!&lt;/li&gt;
            &lt;li&gt;Scroll me I am famous!&lt;/li&gt;
            &lt;li&gt;Scroll me I am famous!&lt;/li&gt;
            &lt;li&gt;Scroll me I am famous!&lt;/li&gt;
            &lt;li&gt;Scroll me I am famous!&lt;/li&gt;
            &lt;li&gt;Scroll me I am famous!&lt;/li&gt;
            &lt;li&gt;Scroll me I am famous!&lt;/li&gt;
            &lt;li&gt;Scroll me I am famous!&lt;/li&gt;
            &lt;li&gt;Scroll me I am famous!&lt;/li&gt;
            &lt;li&gt;Scroll me I am famous!&lt;/li&gt;
            &lt;li&gt;Scroll me I am famous!&lt;/li&gt;
            &lt;li&gt;Scroll me I am famous!&lt;/li&gt;
            &lt;li&gt;Scroll me I am famous!&lt;/li&gt;
            &lt;li&gt;Scroll me I am famous!&lt;/li&gt;
            &lt;li&gt;Scroll me I am famous!&lt;/li&gt;
            &lt;li&gt;Scroll me I am famous!&lt;/li&gt;
            &lt;li&gt;Scroll me I am famous!&lt;/li&gt;
            &lt;li&gt;Scroll me I am famous!&lt;/li&gt;
            &lt;li&gt;Scroll me I am famous!&lt;/li&gt;
            &lt;li&gt;Scroll me I am famous!&lt;/li&gt;
            &lt;li&gt;Scroll me I am famous!&lt;/li&gt;
            &lt;li&gt;Scroll me I am famous!&lt;/li&gt;
            &lt;li&gt;Scroll me I am famous!&lt;/li&gt;
            &lt;li&gt;Scroll me I am famous!&lt;/li&gt;
            &lt;li&gt;Scroll me I am famous!&lt;/li&gt;
            &lt;li&gt;Scroll me I am famous!&lt;/li&gt;
            &lt;li&gt;Scroll me I am famous!&lt;/li&gt;
            &lt;li&gt;Scroll me I am famous!&lt;/li&gt;
            &lt;li&gt;Scroll me I am famous!&lt;/li&gt;
            &lt;li&gt;Scroll me I am famous!&lt;/li&gt;
            &lt;li&gt;Scroll me I am famous!&lt;/li&gt;
            &lt;li&gt;Scroll me I am famous!&lt;/li&gt;
            &lt;li&gt;Scroll me I am famous!&lt;/li&gt;
            &lt;li&gt;Scroll me I am famous!&lt;/li&gt;
            &lt;li&gt;Scroll me I am famous!&lt;/li&gt;
            
          &lt;/ul&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>This snippet works as expected on safari9 and Chrome but ffox fails.
  I am trying not to have the main scrollbar showing on the page.</p>
  
  <p>It looks like the height 100% takes the first header into account.</p>
  
  <p><a href="https://i.stack.imgur.com/9czJ7.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/9czJ7.png" alt="enter image description here"></a></p>
  
  <p><a href="https://i.stack.imgur.com/O23XY.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/O23XY.png" alt="enter image description here"></a></p>