title: Make flex items wrap in nested flex containers before containers themselves wrap in main container
body: <p>If I have a flexbox container containing multiple containers, how do I make the containers' contained items wrap before the containers themselves?</p>
  
  <p>For example (<a href="http://codepen.io/anon/pen/rOeRRz" rel="noreferrer">codepen</a>):</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div&gt;
      &lt;row&gt;
          &lt;column id="first"&gt;
              &lt;widget width=1 height=8&gt;&lt;/widget&gt;
              &lt;widget width=1 height=8&gt;&lt;/widget&gt;
          &lt;/column&gt;
          &lt;row id="second"&gt;
              &lt;widget&gt;&lt;/widget&gt;
              &lt;widget&gt;&lt;/widget&gt;
              &lt;widget&gt;&lt;/widget&gt;
          &lt;/row&gt;
      &lt;/row&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>column, row, widget {
    background: RGBA(0,0,0,.2);
    margin: 1em;
    display: flex;
    flex-wrap: wrap;
    align-items: top;
    align-content: flex-start;
  }
  
  row {
    flex-direction: row;
  }
  
  column {
    flex-direction: column;
  }
  
  widget {
    min-height: 100px;
    flex-grow: 2;
    flex-shrink: 1;
    width: calc(25% - 3em);
    min-width: 300px;
    height: 100px;
    flex-basis: 0;
    padding: .5em;
    display: block;
  }
  
  widget[width=1] {
    flex-grow: 1;
    min-width: 150px;
  }
  
  widget[width=4] {
    flex-grow: 4;
    min-width: 600px;
  }
  
  widget[width=8] {
    flex-grow: 8;
    min-width: 1200px;
  }
  
  widget[height=1] {
    min-height: 150px;
  }
  
  widget[height=4] {
    min-height: 600px;
  }
  
  widget[height=8] {
    min-height: 1200px;
  }
  
  widget {
    background: RGBA(200,0,20,.5);
  }
  </code></pre>
  
  <p>I want the items in <code>#second</code> to wrap before <code>#second</code> itself wraps below <code>#first</code>. In other words, I always want to try wrapping the innermost items before trying to wrap the outermost ones, which seems to be the opposite of what happens by default. Is there any way to do this?</p>
  
  <p><strong>EDIT:</strong> There were requests for visual clarification.</p>
  
  <p>2 containers with several items each:
  <a href="https://i.stack.imgur.com/qsLG0.jpg" rel="noreferrer"><img src="https://i.stack.imgur.com/qsLG0.jpg" alt="full width"></a></p>
  
  <p>Desired behavior, slightly smaller. Innermost items wrap before their containers.</p>
  
  <p><a href="https://i.stack.imgur.com/iul0n.jpg" rel="noreferrer"><img src="https://i.stack.imgur.com/iul0n.jpg" alt="partially wrapped"></a></p>
  
  <p>Desired behavior, smaller still.</p>
  
  <p><a href="https://i.stack.imgur.com/vNnNK.jpg" rel="noreferrer"><img src="https://i.stack.imgur.com/vNnNK.jpg" alt="inner items fully wrapped"></a></p>
  
  <p>Desired behavior, smallest. After the innermost items can't wrap any more, the containers finally wrap.</p>
  
  <p><a href="https://i.stack.imgur.com/TVwxC.jpg" rel="noreferrer"><img src="https://i.stack.imgur.com/TVwxC.jpg" alt="containers wrapped"></a></p>
  
  <p>What actually happens: the containers wrap before their contents.</p>
  
  <p><a href="https://i.stack.imgur.com/KxUPm.jpg" rel="noreferrer"><img src="https://i.stack.imgur.com/KxUPm.jpg" alt="enter image description here"></a></p>
  
  <p><a href="https://i.stack.imgur.com/wB8fu.jpg" rel="noreferrer"><img src="https://i.stack.imgur.com/wB8fu.jpg" alt="enter image description here"></a></p>