title: CSS flexbox dynamic resizing : prefer max-width
body: <p>I have a row flexbox container that wraps.<br>
  On the items in it, I set:</p>
  
  <ul>
  <li><code>flex: 1;</code> so items grow to fill horizontaly the container</li>
  <li><code>min-width: X; max-width: Y;'</code> so items stay within an acceptable size.</li>
  </ul>
  
  <p><strong><a href="http://codepen.io/SalomonBrys/pen/Jvtzn">Here is a simple codepen example</a>.</strong></p>
  
  <p>The problem (as viewable in the example) is the behavior of the resize-wrap.</p>
  
  <p><strong><em>What happens:</em></strong><br>
  Each item is as small as possible so the maximum number of them is put in the first line, they then grow just as much needed to fill the line. Therefore the item's <code>max-width</code> is almost never reached and the items are much closer to <code>min-width</code>.</p>
  
  <p><strong><em>What I'm looking for:</em></strong><br>
  Each item is as big as possible so the minimum number of them is put in the first line, they then shrink just as much needed to add a new item and fill the line. Therefore the item's <code>min-width</code> is almost never reached and the items are much closer to <code>max-width</code>. </p>
  
  <p><strong><em>In other words:</em></strong><br>
  I want the minimum possible number of items per line, not the maximum.</p>
  
  <p>Is there a way to do that in CSS without JS ?</p>
  
  <p>Thanks !</p>