Flexbox Grid Breaks on Safari 6/7

[nickclicksco]

I have just been using Browserstack to test Flexbox Grid and it appears it doesn't work on Safari 6/7 however on 'can I use' Flexbox is compatible with those versions.

If you use Safari 6/7 and visit the homepage http://flexboxgrid.com/ you will notice all of the grids break.

Any idea why this might be happening and how I can resolve this?

[nickclicksco]

[leahschuster]

Also seeing the same issue on Safari 8

[bebaps]

Flexbox in general is not 100% compatible on those browsers without using the proper -webkit- prefix. It is possible that the author doesn't care to support browser versions that far back, as Autoprefixer can be set to last 2 versions as opposed to last 3 versions for example. No Sass/LESS is provided in this repo, so you can try converting the final CSS into whatever preprocessor you use, and then recompile with adjusted Autoprefixer settings for the browsers you want to target.

[lgg]

You can use gulp-autoprefixer or any other autoprefixer version with filters: ['not ie <= 9', 'iOS > 6', 'Safari > 2'];

[MrsHannahJ]

Flexboxgrid uses max-width instead of the flex property. Apparently Safari does not like that. If the max-width rules are replaced by flex AND prefixes are added like mentioned above, it should work in Safari.

https://stackoverflow.com/questions/35137085/flexbox-code-working-on-all-browsers-except-safari-why https://stackoverflow.com/questions/36636243/flex-items-not-stacking-properly-in-safari