Prevent squishy elements with flex none

Categories

You can prevent that annoying squished look that elements like icons get when space runs out in a flex context with flex: none.


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

Code language
CSS
.no-squish {
  flex: none;
}

This is really handy if you have a supporting icon because the default behaviour of a flex parent is to not wrap, which means elements will be forced to shrink as space runs out.

Setting flex to none gives you an inflexible item that can’t grow or shrink, based on the flex rules set on the parent, so it’s ideal for extrinsically sized elements, like icons.

You can’t resize embedded CodePens, but toggle the HTML or CSS tabs on and off and you’ll see the effect.

Hello, I’m Andy and I’ll help you build fast, accessible websites & design systems.

I’m a freelance CSS and design systems consultant, based in the UK. I specialise in design systems and creative web design, such as landing pages and campaign work.

I’m currently helping Google by refactoring the CSS and creating a design system for web.dev, but I have availability for projects such as small websites, landing pages and consultancy. I will have full availability for larger projects in January 2022.

Hire me