60. Flex Item Property: flex-shrink

flex-shrink defines the ability of a flex item to shrink if necessary, typically when the total size of the items exceeds the container size.

How Flex Shrink Works

• flex-shrink takes a unitless number (a ratio). Default is 1 (all items shrink equally).
• If flex-shrink is set to 0, the item will not shrink below its defined width (or its content size).

Example: Preventing Shrinkage

In a navigation bar, you might want your brand logo to maintain its full width, even if the links have to shrink.

css .nav-logo { /* Prevents the logo from ever shrinking smaller than its original size */ flex-shrink: 0; width: 150px; }

.nav-links { flex-shrink: 1; /* Allows links to shrink if the container is too small */ }

Relationship to min-width: If an item is set to flex-shrink: 0, you might also want to set a min-width to ensure the content doesn't break if the screen is very small.