Flex Shrink in CSS
From the CSS Flexbox cheat sheet · Flex Items · verified Jul 2026
Flex Shrink
Define how much a flex item should shrink relative to other items when space is limited
css
.item {
flex-shrink: 1; /* can shrink (default) */
flex-shrink: 0; /* don't shrink */
flex-shrink: 2; /* shrink twice as much */
}html
<div class="container">
<div class="item shrink-0">No shrink</div>
<div class="item shrink-1">Shrink 1</div>
<div class="item shrink-2">Shrink 2</div>
</div>🎨 Flex Shrink
0
1
2
📉 Controls shrink ratio
⚠️ 0 prevents shrinking
💡 Handles overflow