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 settingflex
tonone
.
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.
![](https://piccalil.li/images/social-avatar.png)
Like this post? Got a question?
Reply via: Email, Bluesky, Mastodon, Twitter