Flex Shrink

Use the bundled .flex-shrink utility when selected items should contract in limited space.

Overview

.flex-shrink controls whether an item compresses when there isn’t enough space in the container. Use it to designate which items should give up width first.

Class	CSS
.flex-shrink	flex-shrink: 1;

Selective Shrink

Apply .flex-shrink to the item that should compress first while its siblings stay at their intended widths. Items without flex-shrink will resist compression.

<div class="elementor-element flex gap-4 overflow-hidden">
  <div class="flex-shrink card padding-4" style="width: 20rem;">
    Primary card
  </div>
  <div class="card padding-4" style="width: 12rem;">
    Pinned card
  </div>
</div>

Rail with Shared Shrink

When all items in a rail share .flex-shrink, they compress equally. This keeps the layout balanced when the container is narrow.

<div class="elementor-element flex gap-4 overflow-hidden">
  <div class="flex-shrink card padding-4" style="width: 14rem;">
    Card A
  </div>
  <div class="flex-shrink card padding-4" style="width: 14rem;">
    Card B
  </div>
  <div class="flex-shrink card padding-4" style="width: 14rem;">
    Card C
  </div>
</div>

Best Practices

• Use .flex-shrink when an item may safely compress before the container overflows.
• Keep critical controls or labels on non-shrinking siblings when width must stay stable.
• Combine with .overflow-auto on rails when compression alone is not enough.

Related Utilities

Flex Basis

Initial size before shrink factors apply

Flex Grow

Let items expand when extra space exists