flex shrink

Utilities for controlling how flex items shrink.

2025-03-08

Written by: tdtc

ClassStyles
shrinkflex-shrink: 1;
shrink-<number>flex-shrink: <number>;
shrink-[<value>]flex-shrink: <value>;
shrink-(<custom-property>)flex-shrink: var(<custom-property>);

flex-shrink

Allowing flex items to shrink

Use shrink to allow a flex item to shrink if needed:

<div class="flex ...">
  <div class="h-14 w-14 flex-none ...">01</div>
  <div class="h-14 w-64 shrink ...">02</div>
  <div class="h-14 w-14 flex-none ...">03</div>
</div>

Preventing items from shrinking

Use shrink-0 to prevent a flex item from shrinking:

<div class="flex ...">
  <div class="h-16 flex-1 ...">01</div>
  <div class="h-16 w-32 shrink-0 ...">02</div>
  <div class="h-16 flex-1 ...">03</div>
</div>

Using a custom value

Use the shrink-[] syntax to set the flex shrink factor based on a completely custom value:

<div class="shrink-[calc(100vw-var(--sidebar))] ...">
  <!-- ... -->
</div>

Ref