Flexbox showing differently in chrome/safari

Hi Campers,

I am having some trouble with my flex-box displaying in chrome and safari. It works fine in Firefox. I have two ul in a container which has display: flex; and flex-direction: column. Instead of stacking one after the other, in chrome they are on top of each other.

Also, my SVG arrows don’t work in chrome or safari.

Live version:

Your SVG arrows must have width and height to show on chrome.

You don’t need to use flex in your nav ul selector for the @media (max-width: 840px), just set it to display: block. Another option is to not allow the nav ul to shrink, just set it to flex-shrink: 0;

1 Like

Thank you so much! I was stressing over this all night. I never knew about flex-shrink. I wonder why Firefox handles this property differently? Anyway, thank you. You have helped a lot. :smiley: