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:
http://mike-silverman.com/vertices/
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. 