title: Flex layout broken in IE11
body: <p>I'm completely lost, I read so much things and I still couldn't figure it out how to fix this layout working in IE11 :(</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div class="site"&gt;
    &lt;header&gt;
      &lt;div class="wrap"&gt;
        Header
      &lt;/div&gt;
    &lt;/header&gt;
    &lt;main class="site-content"&gt;
      &lt;div class="wrap"&gt;
        &lt;aside&gt;
          &lt;ul&gt;
            &lt;li&gt;Menu 1&lt;/li&gt;
            &lt;li&gt;Menu 2&lt;/li&gt;
          &lt;/ul&gt;
        &lt;/aside&gt;
        &lt;article&gt;
          &lt;h1&gt;Hello&lt;/h1&gt;
        &lt;/article&gt;
      &lt;/div&gt;
    &lt;/main&gt;
    &lt;footer&gt;
      &lt;div class="wrap"&gt;Footer&lt;/div&gt;
    &lt;/footer&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>body, html {
    margin: 0;
  }
  
  .site {
    display: flex;
    min-height: 100vh;
    flex-direction: column;
  }
  
  .site-content {
    flex: 1;
    display: flex;
  }
  
  aside {
    float: left;
    width: 25%;
    background: #ccc;
    margin-right: 5%;
  }
  
  article {
    float: left;
    width: 70%;
  }
  
  footer {
    background: #eee;
  }
  
  header {
    background: tomato;
  }
  
  .wrap {
    max-width: 960px;
    margin: 0 auto;
    flex: 1;
    display: flex;
  }
  </code></pre>
  
  <p>DEMO: <a href="http://codepen.io/anon/pen/WoZJWj" rel="nofollow noreferrer">http://codepen.io/anon/pen/WoZJWj</a></p>
  
  <p>It's working in every browsers but IE11 makes me crazy.
  Thanks in advance</p>