title: How to make flex items display vertically instead of horizontally?
body: <p>I am trying to make 2 elements display vertically. This is supposed to work, but on firefox 21 the elements show up horizontally.</p>
  
  <p>Any one knows why and how to fix it?</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;style&gt; 
  div
  {
    width: 50%;   
    display: -moz-box;
    -moz-flex-direction: column;
   }    
  #p1
  {
    border:1px solid red;
  }    
  #p2
  {
    border:1px solid blue;
  }
  &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;    
  &lt;div&gt;
   &lt;div id="p1"&gt;item1&lt;/div&gt;
   &lt;div id="p2"&gt;item2&lt;/div&gt;
  &lt;/div&gt;  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>