The flex-shrink property determines how flex items shrink if there is not enough space in the container. It sets the flex shrink factor of a flex item.

Default Behavior (Value 1)

By default, all flex items have a flex-shrink value of 1. This means that if the container is too small, all items will shrink equally to fit.

Preventing Shrinkage (Value 0)

If you set flex-shrink: 0, the item will strictly maintain its flex-basis (or width) and will not shrink, forcing other items to shrink more or causing overflow.

Proportional Shrinking

If you assign higher values, the item shrinks more aggressively. For example:

• Item A: flex-shrink: 1
• Item B: flex-shrink: 2

Item B will absorb twice as much "negative space" as Item A.

Best Practices

Use flex-shrink: 0 for fixed elements like avatars, icons, or navigation sidebars. Use default or higher values for fluid content areas that can adapt to smaller screens.