Flex Shrink

Utilities for controlling how flex items shrink.

Class Name	CSS Equivalent
shrink	flex-shrink: 1;
shrink-0	flex-shrink: 0;

Shrink

The .shrink class sets an element's flex-shrink property to 1. This allows the element to shrink and distribute any extra space within the flex container.

<div class="flex gap-m w-full">
  <div class="[...]">1</div>
  <div class="shrink [...]">2</div>
  <div class="[...]">3</div>
</div>

1

2

3

Shrink-0

The .shrink-0 class sets an element's flex-shrink property to 0. This prevents the element from shrinking, and it maintains its original size within the flex container.

<div class="flex gap-m w-full">
  <div class="[...]">1</div>
  <div class="shrink-0  [...]">2</div>
  <div class="[...]">3</div>
</div>

1

2

3