Struggling with Flexbox Content Grid // Safari

Design help General
1

I have a collection setup in a flexbox with 4 items. On desktops, the 4 items should display in a 2x2 grid.

The page is loading perfectly fine in Chrome and Firefox, but Safari is giving me problems. No matter how I adjust the settings, Safari always shows 1 item instead of 2 on the top row.

webflow-flexboxissue
webflow-flexboxissue1400×1200 220 KB

Experts please help! I’ve tried so many different configurations with no luck. I’m sure it’s something simple I’m missing. Thank you I really appreciate the insight!

Here’s the image link: https://cdn.pbrd.co/images/HkzbjoN.jpg

Here is my site Read-Only (go to Projects page):
https://preview.webflow.com/preview/palmetto-green?preview=63b876b3c2ed5c4b0385ccf49c8d52d2

Here’s the live site:
http://palmetto-green.webflow.io/projects

2

Any helpers able to take a look?

3

Sure I’ll take a look for you… did you solve it yet?

Safari has been calculating flex items differently, if I’m not mistaken, you need to add flex-basis for flex items to work properly. WF doesn’t have this functionality yet. I’ll try to find workarounds.

4

Had this problem, just double check that the children are not set to float:left. You might have to set the parent to display:block to access the controls first, then back to flex once the child float is off.