title: Browser differences (Firefox vs Chrome) when using flex-direction, flex-flow
body: <p>I noticed an interesting difference between Firefox and Chrome in the following flexbox layout:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>html,
  body {
    height: 100%;
    min-height: 100%;
    margin: 0px;
    display: flex;
    flex-direction: column;
  }
  header {
    border: 1px solid #D3D3D3;
    flex: 0 1 auto;
  }
  .row {
    display: flex;
    flex-direction: column;
    flex: 1 0 auto;
    flex-wrap: wrap;
  }
  .tab1 {
    flex: 1 0 48%;
    position: relative;
    margin: 0.5em;
    background-color: orange;
  }
  .tab2 {
    flex: 1 0 48%;
    position: relative;
    margin: 0.5em;
    background-color: blue;
  }
  .tab3 {
    flex: 1 0 48%;
    position: relative;
    margin: 0.5em;
    border: 1px solid lightgray;
    background-color: green;
  }
  .tab4 {
    flex: 1 0 48%;
    position: relative;
    margin: 0.5em;
    border: 1px solid lightgray;
    background-color: yellow;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  
  &lt;head&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;header&gt;
    &lt;/header&gt;
    &lt;div class="row"&gt;
      &lt;div class="tab1"&gt;&lt;/div&gt;
      &lt;div class="tab2"&gt;&lt;/div&gt;
      &lt;div class="tab3"&gt;&lt;/div&gt;
      &lt;div class="tab4"&gt;&lt;/div&gt;
    &lt;/div&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>When I run this in Chrome 43, I get horizontal rectangles. However, in Firefox 39 this results in vertical rectangles. The important part is the use of <code>flex-direction: column;</code> and <code>flex-wrap: wrap;</code> in the element with class <code>.row</code>. </p>
  
  <p>In order to get a similar layout, adding <code>height: 100%;</code> gives vertical rectangles in Chrome. However, this creates a scrollbar in both browsers due to the (empty) header element. Does anyone know what is the reason of this difference in the layout and what is the best way to fix it?</p>
  
  <p><strong>UPDATE</strong>:</p>
  
  <p>By the way, I'm interested in understanding why there is a difference in Chrome and Firefox, not so much in obtaining a layout with vertical rectangles. Maybe there is something buggy in the use of <code>flex-direction: column</code> or maybe I'm doing something wrong. In any case, it would be helpful to know that.</p>