CSS propertyFlexbox
flex-shrink
Determines how much an item shrinks when the container runs out of room.
- Initial value
1- Inherited
- No
- Animatable
- yes, as a number
- Applies to
- flex items
- JavaScript
element.style.flexShrink = "0"
Example
#CSS
.user {
display: flex;
align-items: center;
gap: 10px;
}
.user .avatar {
flex-shrink: 0;
}Example HTML
<div class="user stage" style="width: 260px;">
<span class="avatar box" style="width: 44px; height: 44px; border-radius: 99px; padding: 0;">AC</span>
<span>Anna Carter, Flexbox master and author of three course projects</span>
</div>Preview
Definition and usage
#The flex-shrink property works the opposite way from flex-grow. When the items together are wider than the container, each one gives up part of its width in proportion to this number. By default every item has 1, so they shrink equally.
The value 0 protects an item from shrinking. That’s useful for icons, avatars, buttons, and labels that should keep their size while the text next to them narrows.
Items don’t shrink below the minimum width of their content (the longest word). To allow more shrinking, set min-width: 0.
Syntax
#Syntax
flex-shrink: <number>;Values
#Values in practice
#1
All items shrink equally, since they have the default 1.
.target { flex-shrink: 1; }0
Item 2 keeps its full 120px, only the others shrink.
.target { flex-shrink: 0; }3
Item 2 gives up three times as much space as the others.
.target { flex-shrink: 3; }Browser support
#Widely available
Works in all modern browsers, phones included. You can use it without worry.
- Chrome
- Edge
- Firefox
- Safari
Good practices
#- Icons and avatars next to text should almost always have
flex-shrink: 0, otherwise they squash into an oval. - If long text inside a flex item refuses to wrap or truncate, add
min-width: 0to it.
Related entries
#Spotted a mistake or missing an example? Write to us.