title: css3 flexbox compatibility problems with Firefox and Safari
body: <p>I'm trying to sort out my flexbox layout so it is compatible with latest versions of IE/Firefox/Safari, and I have issues with Firefox/Safari.</p>
  
  <p>Proposed layout:</p>
  
  <pre><code>-----------------
       header
  -----------------
      |
      |
      |
  nav |  section
      |
      |
      |
      |
  </code></pre>
  
  <p>In Firefox and Safari <code>&lt;section&gt;</code> is underneath <code>nav</code></p>
  
  <p>CSS:</p>
  
  <pre><code>body {
    width:50%;
    height:100%;
    display: -ms-flexbox;
    -ms-box-orient: horizontal;
  
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flexbox;
  
    -webkit-flex-flow: row wrap;
    -moz-flex-flow: row wrap;
    -ms-flex-flow: row wrap;
    flex-flow: row wrap;
  }
  
  header {
      padding-top:100px;
      -webkit-flex: 1 100%;
      -moz-flex: 1 100%;
      -ms-flex: 1 100%;
      flex: 1 100%;
  }
  
  nav {
      -webkit-flex: 1;
      -moz-flex: 1;
      -ms-flex: 1;
      flex: 1;
      width:10%;
      height:100%;
  }
  
  section {
      -webkit-flex: 4;
      -moz-flex: 4;
      -ms-flex: 4;
      flex: 4;
      width:40%;
      height:100%;
  }
  </code></pre>