Prevent squishy elements with flex none

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

.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.

Advert