Flex layout all squashed in Safari?

Tom Szpytman
Sep 3 · 1 min read

Panic arises as you realise that the flex layout you perfected isn’t rendering properly on Safari. Your layout is squashed. It looks ghastly. You have a release in an hour. You inspect your layout; it looks like Safari isn’t properly calculating the heights of your flex containers. Your thoughts turn down the dark path of giving your containers fixed heights…

No need! Just apply flex-shrink: 0 to your flex containers and you should be good to go!

Read more about flex-shrink here.

Tom Szpytman

Written by

Full-stack Software Engineer.