Skip to main content

​
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.
ClassCSS
.flex-shrinkflex-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 p-4" style="width: 20rem;">
    Primary card
  </div>
  <div class="card p-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 p-4" style="width: 14rem;">
    Card A
  </div>
  <div class="flex-shrink card p-4" style="width: 14rem;">
    Card B
  </div>
  <div class="flex-shrink card p-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.

Flex Basis

Initial size before shrink factors apply

Flex Grow

Let items expand when extra space exists

Flex Wrap

Move items to new rows instead of shrinking them