title: Flex-box ignores wrapped children's margin (margin collapse)
body: <p>Given the following HTML:</p>
  
  <pre><code>&lt;div class="outer"&gt;
    &lt;div&gt;
      &lt;div class="inner"&gt;A&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="outer"&gt;
    &lt;div class="inner"&gt;B&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and the following CSS (prefix free):</p>
  
  <pre><code>.outer {
    display: box;
    box-orient: vertical;
  
    height: 100px;
    width: 100px;
  
    background: red;
    margin: 10px;
  }
  
  .inner {
    height:     50px;
    margin-top: 10px;
    background: green;
  }
  </code></pre>
  
  <p><img src="https://i.stack.imgur.com/N72uM.png" alt="A and B"></p>
  
  <p>Here is a <a href="http://codepen.io/boennemann/pen/oFwtK" rel="noreferrer">CodePen</a>.</p>
  
  <p><code>A</code> is wrapped in a <code>&lt;div&gt;</code> so it's margin gets ignored.</p>
  
  <p><strong>Q: How can I achieve <code>B</code>'s behavior for <code>A</code> (margin) with the flex box model?</strong></p>
  
  <p>Note: The div wrappers can go multiple levels deep</p>
  
  <p>Targeting: latest Chrome/Safari/iOS</p>
  
  <p>Thank you very much for your help!</p>
  
  <p>Edit: Thanks to @JoséCabo I came up with this:</p>
  
  <pre><code>.outer {
    display: flex;
    flex-direction: column;
  
    height: 100px;
    width: 100px;
  
    background: red;
    margin: 10px;
  }
  
  .inner {
    height:     50px;
    margin-top: 10px;
    background: green;
  }
  </code></pre>
  
  <p><a href="http://codepen.io/boennemann/pen/CLyot" rel="noreferrer">CodePen</a></p>
  
  <p>Chrome:
  <img src="https://i.stack.imgur.com/VRtYy.png" alt="Chrome"></p>
  
  <p>Safari:
  <img src="https://i.stack.imgur.com/Jjnjj.png" alt="Safari"></p>
  
  <p>Unfortunately it doesn't work in Safari as mentioned by @cimmanon, so I still need some help.</p>