问题
I'm trying to have two elements fill their container and wrap when they reach a certain minimum size. The code I have works perfectly on all browsers other than safari & I can't figure out an alternative. It appears to be an issue with flex-basis: 0
Here's the issue:
http://www.cssdesk.com/RKeNY
Both display differently in safari and chrome. When the container width is changed on safari the flex-wrap has no effect.
回答1:
Try setting
-webkit-flex:1 1 auto;
instead of
-webkit-flex:1;
on the flex elements.
This is discussed here: https://github.com/Modernizr/Modernizr/issues/1414
Specifically:
hexalys commented 28 days ago
To enable wrapping you'll need to need to specifically set flex: auto (equivalent to flex: 1 1 auto;) or set both property flex-shrink: 1;and flex-basis: auto. The flex: 1; you have in your code does flex: 1 1 0px; technically allowing shrink, but apparently there is a bug with the webkit prefixed version in Safari which does not allow a flex wrap in that condition, while it correctly does on the unprefixed version of Chrome and Firefox.
来源：https://stackoverflow.com/questions/25284540/flex-wrap-issues-on-safari