title: CSS: Full width flex column doesn't stack on top of each other on webkit
body: <p>I have two divs in a container like this:</p>
  
  <pre><code>&lt;div class="container"&gt;
      &lt;div class="div-a"&gt; Hello &lt;/div&gt;
      &lt;div class="div-b"&gt; Lorem &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And I have set the container to <code>display:flex</code> and <code>flex-direction</code> to <code>column</code>. </p>
  
  <p>I aim to align the 2 divs <strong>on top of each other</strong>. This works fine on Firefox but not on WebKit (Chrome/Safari). On WebKit, the columns align next to each other instead.</p>
  
  <p>Here is a <a href="http://jsfiddle.net/tnxjL4tc/" rel="nofollow">jsFiddle</a> so you can see.</p>
  
  <p>My CSS is:</p>
  
  <pre class="lang-css prettyprint-override"><code>.container {
      width:100%;
      float:left;
      flex-direction: column;
      display: -webkit-box;
      display: -moz-box; 
      display: -ms-flexbox;
      display: -webkit-flex; 
      display: flex; 
  }
  
  .div-a {
      background:lightgreen;
      order:2;
      width:100%;
      float:left;
  }
  
  .div-b {
      background:lightblue;
      order:1;
      width:100%;
      float:left;
  }
  </code></pre>
  
  <p>Why is this not working on WebKit?</p>