HTML & CSS reference

flex-shrink

How much a flex item shrinks when there is not enough space.

Syntax

flex-shrink: number;

Values

Parameter	Type	Description
1	number	Shrinks along with the others (the default).
0	number	Does not shrink — keeps its size.

Examples

An image that keeps its width next to text:

<style>
  .row { display: flex; gap: 8px; width: 260px; border: 1px dashed gray; }
  .row img { width: 80px; }
</style>
 
<div class="row">
  <img src="/media/photo-200x200.jpg" alt="" style="flex-shrink: 0;">
  <p>A long text next to the image does not squeeze it, because the image has flex-shrink: 0.</p>
</div>

Notes

flex-shrink: 0 is the usual fix for icons and avatars that get squashed in a row.

In the tutorial

Flex items — How to control individual items in flexbox — flex-grow, flex-shrink, flex-basis, the flex shorthand, align-self, order and margin auto.

Thanks for reading!