flex-box: shrink before wrap

Question

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.

The structure is like this:

<div class="row" style="display: flex; flex-flow: row wrap">     <div class="column fixed" style="flex: 0 0 auto"></div>     <div class="column stretch" style="flex: 1 1 auto"></div>     <div class="column fixed" style="flex: 0 0 auto"></div> </div> 

Please see http://jsfiddle.net/mh3rypqj/1/

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.

My expected behaviour when space is getting smaller: First shrink, then wrap. Shrink the .stretch. Once min-width is reached, wrap the elements.

The behaviour I get once I put the p in .stretch: First wrap, then shrink. The row is first wrapped. Shrinking only occurs after everything is wrapped.

I want to have First shrink, then wrap. In short, I want the second row in the JSFiddle to behave just like the first. What do I have to do?

Answer 1

Set flex-basis equal to min-width:

.column.stretch {     flex: 1 1 100px; /* or 1 0 100px, and no more need in min-width at all */     max-width: 300px;     min-width: 100px;     background: red; } 

edited JSfiddle example