CSS flex-shrink Property

Subject: css

CSS flex-shrink Property

The flex-shrink property defines how much a flex item should shrink compared to other items when there isn’t enough space in the flex container.

It is part of the Flexbox model and works alongside flex-grow and flex-basis.

Why Use flex-shrink?

  • Prevent important elements from shrinking
  • Control how different elements shrink proportionally
  • Preserve content readability in small viewports
  • Avoid layout breaking on smaller screens

Syntax

🚀 Try it in Compiler
  • <number> is a non-negative number (default is 1)
  • 0 prevents the item from shrinking
  • Higher values allow items to shrink more

Example: Controlling Shrink Behavior

🚀 Try it in Compiler

Explanation

  • The container width is 400px
  • Each item has a flex-basis of 300px (total 600px)
  • .item1 shrinks due to flex-shrink: 1
  • .item2 does not shrink due to flex-shrink: 0

Best Practices

  • Use flex-shrink: 0 on logos, icons, or important text
  • Use higher values for less important or decorative elements
  • Always test layout shrinkage across various screen widths
  • Combine with flex-basis or width for expected results

Common Use Cases

  • Locking image/logo widths in navbars
  • Preventing buttons or labels from shrinking
  • Allowing only text boxes to adjust on smaller screens
  • Maintaining fixed-width sidebars in responsive layouts

Key Takeaways

  • flex-shrink controls shrink ratio when space is limited
  • 0 disables shrinking for that item
  • Higher numbers shrink more than lower ones
  • Use with flex-basis or width for controlled layouts
  • Ideal for adaptive, responsive, and content-safe designs
Next: CSS Flex Basis Property