flex-shrink defaults to 1, meaning items shrink proportionally by default when they collectively overflow their container's available space, and setting it to 0 on a specific item prevents that particular item from shrinking at all, forcing its siblings to absorb more of the necessary shrinkage instead, or causing overflow if they can't shrink enough on their own. Like flex-grow, shrinking is distributed proportionally among items with a nonzero flex-shrink value, though the actual calculation also factors in each item's own base size, meaning a larger item with the same flex-shrink value as a smaller one shrinks by a proportionally larger absolute amount.
1Understanding Flex-shrink
flex-shrink defaults to 1, meaning items shrink proportionally by default when they collectively overflow their container's available space, and setting it to 0 on a specific item prevents that particular item from shrinking at all, forcing its siblings to absorb more of the necessary shrinkage instead, or causing overflow if they can't shrink enough on their own. Like flex-grow, shrinking is distributed proportionally among items with a nonzero flex-shrink value, though the actual calculation also factors in each item's own base size, meaning a larger item with the same flex-shrink value as a smaller one shrinks by a proportionally larger absolute amount.
Set flex-shrink: 0 on an item that should never shrink below its natural or specified size, like a fixed-size icon or logo, letting its more flexible siblings absorb any necessary shrinkage instead when space runs short.
.logo {
flex-shrink: 0;
width: 50px;
}
/* sibling nav links left at default flex-shrink: 1 */2Practical Example
Here is a real-world application of Flex-shrink showing how it is used in production CSS code.
.item {
flex-shrink: 1;
flex-basis: 100px;
}
/* container narrows, forcing items to shrink below their 100px basis */3Best Practices
Follow these guidelines when working with Flex-shrink:
1. Set flex-shrink: 0 on items that should maintain a fixed, unshrinking size, like an icon or logo, when their siblings are more free to shrink instead
2. Understand that flex-shrink's default value of 1 means items shrink proportionally by default whenever they collectively overflow the container, which is often the desired behavior without any explicit configuration needed
3. Combine flex-shrink: 0 with an explicit flex-basis or width on an item to fully lock in a fixed, non-shrinking, non-growing size for it
Tip: Set flex-shrink: 0 on an item that should never shrink below its natural or specified size, like a fixed-size icon or logo, letting its more flexible siblings absorb any necessary shrinkage instead when space runs short.
.logo {
flex-shrink: 0;
width: 50px;
}
/* sibling nav links left at default flex-shrink: 1 */