title: Why Does My Flexbox Sticky Footer Not Work in Safari?
body: <p>I've been trying to learn something about CSS flexboxes, specifically to get a sticky footer working, based off <a href="http://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/" rel="nofollow">this example</a>.</p>
  
  <p>The layout is 3 basic divs: a header, main content and footer. The main content div is supposed to expand vertically such that the footer is always at the bottom of the page. In Safari, the page loads as expected, but resizing the window <strong>vertically</strong> does not adjust the height of the layout (<em>i.e.</em> nothing's moving) — if I make the window taller, the extra space in the main content div doesn't change to keep the footer at the bottom, likewise . Resizing the window <strong>horizontally</strong> does reflow the page properly. Everything does work as expected in Chrome.</p>
  
  <p>The <a href="http://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/" rel="nofollow">example page</a> works as I would expect, and I've followed the example CSS closely (using <a href="https://github.com/ai/autoprefixer" rel="nofollow">Autoprefixer's</a> <a href="http://jsfiddle.net/simevidas/udyTs/show/light/" rel="nofollow">live demo</a>). Comparing the pages in web inspector, the flexbox CSS appears to be consistent, and the only (seemingly) relevant difference is the live code on the example uses <code>min-height: 100%</code> for the flexbox container, whereas mine (and the example code given) uses <code>min-height: 100vh</code> (using <code>100%</code> didn't work at all for me).</p>
  
  <p>So my question: what is the example site doing differently that mine isn't, and why? Secondarily, why does <code>min-height</code> work in percentages for one, but only viewport units for another?</p>
  
  <p>My code (<a href="http://jsfiddle.net/gZ6be/1/" rel="nofollow">also on jsfiddle</a>):</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;title&gt;Flexbox Header Test&lt;/title&gt;
      &lt;style type="text/css"&gt;
          body {
              font-family: Avenir, sans-serif;
              display: -webkit-box;
              display: -webkit-flex;
              display: -ms-flexbox;
              display: flex;
              -webkit-box-orient: vertical;
              -webkit-box-direction: normal;
              -webkit-flex-direction: column;
              -ms-flex-direction: column;
              flex-direction: column;
              padding: 0;
              margin: 0;
              min-height: 100vh;
          }
  
          div {
              width: 100%;
          }
          div p {
              margin-left: 1em;
              margin-right: 1em;
          }
          div.header {
              background-color: orange;
              text-align: center;
          }
          div.main {
              background-color: grey;
              -webkit-box-flex: 1;
              -webkit-flex: 1;
              -ms-flex: 1;
              flex: 1;
          }
          div.footer {
              color: white;
              background-color: blue;
          }
      &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div class="header"&gt;
  &lt;h1&gt;Header&lt;/h1&gt;
  &lt;/div&gt;
  &lt;div class="main"&gt;
  &lt;p&gt;Lots of text here&lt;/p&gt;
  
  &lt;/div&gt;
  &lt;div class="footer"&gt;
  &lt;p&gt;Footer text here&lt;/p&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>