Preventing flex items from becoming squashed
Here's a great tip from Andy Bell over at Piccalil.li 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 settingflextonone.
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.
Andy Bell
Like this post? Got a question?
Reply via: Email, Bluesky, Mastodon, Twitter