title: Nested Flexbox 100% Height Not Working in Safari
body: <p>I'm new to Flexbox and I'm trying to use it to create a layout with a fixed header, fixed footer and a content area that fills up the available space in between the header and footer. The content area is a scrollable area that has 3 panels (divs), each of which has 100% height. For demo purposes, i put the <em>a, b, c</em> (ill refer to them as Panel a, Panel b and Panel c) text on top of each panel.</p>
  
  <p>In Firefox v39, Panel a, b and c are taking the full height of the scrollable container.</p>
  
  <p>In Safari (v 8.0.6 (10600.6.3)), each of the panel's height is a little bit taller than the container. If you scroll to the last Panel (Panel c), the title 'c' doesn't show up anymore when the content is scrolled all the way down. This is not the case with Firefox.</p>
  
  <p>My desired behaviour is the behaviour in Firefox.</p>
  
  <p>Here is the <a href="http://codepen.io/anon/pen/doKeQy?editors=101" rel="noreferrer">codepen</a>. </p>
  
  <pre><code>&lt;head lang="en"&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;title&gt;Sample&lt;/title&gt;
      &lt;style&gt;
          html, body {
              height: 100%;
              width: 100%;
              font-size: 100%;
              margin: 0px;
              font-family:open-sans;
              font-style: normal;
              font-weight: 400;
          }
          *, *:before, *:after{
              -webkit-box-sizing: border-box;
              -moz-box-sizing: border-box;
              -ms-box-sizing: border-box;
              box-sizing: border-box;
  
          }
      &lt;/style&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;div style="height: 100%; width: 100%; ;display: -webkit-flex; display: flex; -webkit-flex-flow: column;  flex-flow: column;"&gt;
          &lt;div style="width:100%; min-height: 50px;"&gt;
              header&lt;br&gt;header&lt;br&gt;header&lt;br&gt;
          &lt;/div&gt;
          &lt;div style="display: -webkit-flex; display: flex; -webkit-flex-flow: column; flex-flow: column; width:100%; height: 100%; -webkit-flex: 1 1 auto; flex: 1 1 auto; -ms-flex: 1 1 auto; "&gt;
              &lt;div style="overflow-y: auto; width:100%; height: 100%; border:red solid thin"&gt;
                  &lt;div  style="width:100%; height: 100%; border:green solid thin"&gt;
                      a
                  &lt;/div&gt;
                  &lt;div style="width:100%; height: 100%; border:green solid thin"&gt;
                      b
                  &lt;/div&gt;
                  &lt;div style="width:100%; height: 100%; border:green solid thin"&gt;
                      c
                  &lt;/div&gt;
              &lt;/div&gt;
  
          &lt;/div&gt;
          &lt;div style=" min-height:30px; border:blue solid thin;"&gt;
              footer
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>Thanks.</p>