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.


Comments

If you liked this post, you might like these ones, too

  1. A safer way to vertically fill the viewport

    🔥 A handy quick tip.

    Continue
  2. Easy horizontal and vertical centering in CSS

    🔥 A handy quick tip.

    Continue
  3. Use a set to remove array duplicates

    🔥 A handy quick tip.

    Continue

Become a supporter by joining the Piccalilli Membership

For $5 per month, you get access to a private, friendly Discord community, a regular newsletter, huge discounts on courses and free access to all premium tutorials.

Most importantly, by becoming a supporter, you help make as much content, free-to-everyone as possible on this site, which benefits everyone. As a member, you also get an ad-free experience around the site.

Support Piccalilli by becoming a member

Sign up for updates

Stay up to date with updates from Piccalilli. You’ll get alerted as soon as any new content gets published. You’ll also get updates on upcoming courses and membership features! You can unsubscribe at any time, too.