What does flex-shrink control?

flex-shrink is the mirror image of flex-grow: a ratio deciding how much each item gives up when the items together are too big for the container.

When the items' combined flex-basis exceeds the container width, something has to shrink. flex-shrink shares out that overflow — an item with a higher shrink factor loses proportionally more of its size.

#parent div {
  /* 4 items × 40% = 160%, which overflows by 60% */
  flex-basis: 40%;
  /* All items shrink by an equal share */
  flex-shrink: 1;
}
#parent div:nth-child(3) {
  /* The 3rd item shrinks 3x as much as the others */
  flex-shrink: 3;
}

Worked example (60% of overflow to remove):

• Total shrink factors = 1 + 1 + 3 + 1 = 6 shares
• Items 1, 2, 4 (factor 1): each loses 60% × (1/6) = 10% → 40% − 10% = 30%
• Item 3 (factor 3): loses 60% × (3/6) = 30% → 40% − 30% = 10%

Practical note: the default flex-shrink is 1, so flex items shrink to avoid overflow by default. Setting flex-shrink: 0 is the common way to say "never shrink this item below its basis" — useful for things like a fixed-width sidebar or icon.