flex-shrink

Definition

The flex-shrink CSS property is used in flexbox layouts to determine how flex items shrink in size when there is not enough space available along the main axis. It specifies the ability of a flex item to reduce its size relative to other items. The flex-shrink property accepts a unitless value, typically a positive number.

For example, flex-shrink: 1; means the item will shrink proportionally to other items if there is not enough space. If an item has a flex-shrink value of 0, it will not shrink at all, preserving its original size. The flex-shrink property is helpful for creating flexible and responsive layouts where items adjust their size to accommodate different screen sizes and available space.

Syntax

.badge {
  flex-shrink: 0;
}

Values

<number>: proportion to shrink (default 1).
0 disables shrinking.

Practical Examples

.badge {
  flex-shrink: 0;
}

Prevent important items from shrinking when space is tight.

HTML

No shrink

Flexible

Code

<div class="flex gap-4 overflow-hidden rounded-xl border border-slate-200 bg-white p-4 shadow-sm">
  <div class="flex min-w-[8rem] flex-shrink-0 items-center justify-center rounded-lg bg-slate-100 p-4 text-sm text-slate-700">No shrink</div>
  <div class="flex flex-1 items-center justify-center rounded-lg bg-slate-100 p-4 text-sm text-slate-700">Flexible</div>
</div>

Tips & Best Practices

Apply to avatar or icon containers so they stay readable.
Combine with overflow to handle truncated content gracefully.

Accessibility & UX Notes

Preserving size ensures controls remain tappable.

Browser Support

Supported broadly.

flex-grow and flex-basis.
min-width constraints.