flex-wrap not working as expected in Safari

Set child elements like this seems to work for me

flex: 1 0 auto;

It seems this is a bug in Safari. In a separate issue, I tested using the min-width in place of auto in lines where you say something like -webkit-flex: 1 1 auto;.

This question has some info: https://stackoverflow.com/a/30792851/756329

I'm using Safari 11.0.1 and the bug persists. I use Bootstrap 3 combined with display: flex on my .row elements. I added following to my css to target the column elements. There seems to be something about the width percentages in Safari that aren't being honored correctly.

.row [class*=col-]{
    margin:0 -.3px;
}

I had a similar issue in Safari (9.1.3) with the Bootstrap 3 grid system (e.g. col-md-4) in combination with flex. I solved it by setting margin: 0 -1px; on the col items and flex-wrap: wrap; on the wrapper.