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.

​
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.

​
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