Flexbox item not shrinking below content size

A flex item refuses to shrink below its content width, causing overflow. Long text or images break the flex layout even with flex-shrink: 1.

Flex items have min-width: auto by default, meaning they won't shrink below content size. Fix: add min-width: 0 to the flex item. For text truncation, also add overflow: hidden and text-overflow: ellipsis. For images: add min-width: 0 to parent AND max-width: 100% to image. Same for min-height: 0 in vertical layouts.

The CSS spec sets min-width: auto on flex items, which resolves to the content's intrinsic width. This prevents clipping by default but breaks layouts when you WANT shrinking.