Flex Grow in CSS
From the CSS Flexbox cheat sheet · Flex Items · verified Jul 2026
Flex Grow
Define how much a flex item should grow relative to other items to fill available space
css
.item {
flex-grow: 0; /* don't grow (default) */
flex-grow: 1; /* grow to fill space */
flex-grow: 2; /* grow twice as much */
}html
<div class="container">
<div class="item grow-0">No grow</div>
<div class="item grow-1">Grow 1</div>
<div class="item grow-2">Grow 2</div>
</div>🎨 Flex Grow
0
1
2
📈 Controls growth ratio
💡 0 means no growth
⚡ Distributes extra space