Preventing flex items from becoming squashed

Here's a great tip from Andy Bell over at that's so simple it made me wonder how the hell I'd never heard of it before:

You can prevent elements like <svg> icons getting squished in a flexbox context by setting flex to none.

No longer will I faff around trying to remember what combination of flex: 1 0 auto; I need to prevent my icons and images from becoming squashed.

If you're looking to level up your CSS knowledge, I fully recommend following Andy on Twitter or signing up to his mailing list. Full article here:

Prevent squishy elements with flex none - Quick Tip - Piccalilli
You can prevent that annoying squished look that elements like icons get when space runs out in a flex context with flex: none.

Like this post? Got a question?

Reply via: Email, Bluesky, Mastodon, Twitter