title: flex-box: shrink before wrap
body: <p>I have a layout with multiple columns, of which some are fixed and others stretch as needed. Therefore, I use flexbox. Additionally, I want and need to use flex-wrap.</p>
  
  <p>The structure is like this:</p>
  
  <pre><code>&lt;div class="row" style="display: flex; flex-flow: row wrap"&gt;
      &lt;div class="column fixed" style="flex: 0 0 auto"&gt;&lt;/div&gt;
      &lt;div class="column stretch" style="flex: 1 1 auto"&gt;&lt;/div&gt;
      &lt;div class="column fixed" style="flex: 0 0 auto"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Please see <a href="http://jsfiddle.net/mh3rypqj/1/" rel="noreferrer">http://jsfiddle.net/mh3rypqj/1/</a></p>
  
  <p>Now everything works as expected as long as we are talking about empty divs. Once I put a p in the stretch column, wrapping and shrinking behaves differently.</p>
  
  <p>My expected behaviour when space is getting smaller: <strong>First shrink, then wrap</strong>. Shrink the .stretch. Once min-width is reached, wrap the elements.</p>
  
  <p>The behaviour I get once I put the p in .stretch: <strong>First wrap, then shrink</strong>. The row is first wrapped. Shrinking only occurs after everything is wrapped.</p>
  
  <p>I want to have <strong>First shrink, then wrap</strong>. In short, I want the second row in the JSFiddle to behave just like the first. What do I have to do?</p>