Row Wrap in flex-box not wrapping in Safari

Question

A flex container has four children, each with a flex-basis of 25% an a min-width. flex-flow is set to row wrap. Browsers other then Safari handle this as expected: if the min-width is reached, it wraps the the next item to the next row. In Safari it overflow the container.

See demo here: http://codepen.io/lbilharz/pen/aJbkI

JADE

h1 Why this ain't wrappin' in mobile-safari?   .flex     for i in ['one','two','three','four']       .item         h2=i 

Stylus

.flex   display flex   flex-wrap wrap   flex-direction row   padding 1em   background lightyellow   .item     flex 1 0 25%     padding 1em     box-sizing border-box     min-width 15em 

Any ideas?

Answer 1

Per a comment on bugs.webkit.org, it seems the solution is simple!

If your style is

div.flex {     display: -webkit-flex;     display: flex;     -webkit-flex-wrap: wrap;     flex-wrap: wrap;     -webkit-flex-direction: row;     flex-direction: row; } div.flex .item {     min-width: 15em;     -webkit-flex: 1;     flex: 1; } 

you just need to add more explicitness to your flex declaration. In fact, I think only one line needs to change like so

div.flex {     display: -webkit-flex;     display: flex;     -webkit-flex-wrap: wrap;     flex-wrap: wrap;     -webkit-flex-direction: row;     flex-direction: row; } div.flex .item {     min-width: 15em;     -webkit-flex: 1 1 15em; /* this */     flex: 1; }