Flex Grow

Flex Grow

The flex-grow property controls how flex items expand to fill available space in the container. By default, items only take up the space their content needs. flex-grow tells items to grow beyond their content size.

Default Behavior (No Growth)

.container {
    display: flex;
    width: 800px;
}

.item {
    flex-grow: 0;  /* Default — items don't grow */
}

/* If the three items are 100px each, 500px of space is leftover.
   The items sit at the start, leaving empty space on the right. */

flex-grow: 1 — Fill All Available Space

.item {
    flex-grow: 1;
}

/* All items grow equally to fill the 500px of leftover space.
   Each item gets an additional ~167px (500 ÷ 3). */

How flex-grow Distributes Space

The flex-grow value is a ratio, not a fixed size. It determines what proportion of the remaining space each item gets.

Container: 800px total
Three items, each 100px content width = 300px used
Remaining space: 500px

/* All flex-grow: 1 */
Each gets: 500px ÷ 3 = ~167px extra
Final widths: ~267px, ~267px, ~267px

/* Item 1: flex-grow: 2; Items 2-3: flex-grow: 1 */
Total grow: 2 + 1 + 1 = 4
Item 1 gets: 500 × (2/4) = 250px extra → 350px total
Item 2 gets: 500 × (1/4) = 125px extra → 225px total
Item 3 gets: 500 × (1/4) = 125px extra → 225px total

Visual Examples

/* All items grow equally */
.item { flex-grow: 1; }
/* Result: |===  ===  ===| */

/* First item grows, others don't */
.item-1 { flex-grow: 1; }
.item-2 { flex-grow: 0; }
.item-3 { flex-grow: 0; }
/* Result: |=========  =  =| */

/* First item grows twice as much */
.item-1 { flex-grow: 2; }
.item-2 { flex-grow: 1; }
.item-3 { flex-grow: 1; }
/* Result: |======  ===  ===| */

Common Patterns

Fill Remaining Space (Sidebar Layout)

.layout {
    display: flex;
}

.sidebar {
    width: 250px;     /* Fixed width */
    flex-grow: 0;     /* Don't grow */
}

.main-content {
    flex-grow: 1;     /* Fill all remaining space */
}

Equal-Width Items

.container {
    display: flex;
}

.item {
    flex-grow: 1;     /* All items share space equally */
}

Search Bar Pattern

.search-bar {
    display: flex;
    gap: 8px;
}

.search-input {
    flex-grow: 1;     /* Input fills available space */
}

.search-button {
    flex-grow: 0;     /* Button stays its natural size */
    padding: 10px 20px;
}

flex-grow Values

Value	Behavior
0 (default)	Item does not grow — stays at content/basis size
1	Item grows to fill available space
2, 3, etc.	Item grows proportionally more than items with lower values
Decimal (0.5)	Grows at half the rate of flex-grow: 1

Important: It's About the LEFTOVER Space

flex-grow only distributes remaining space — the space left after all items have their content/basis size. It doesn't distribute the total container width.

Key Takeaways

• flex-grow: 0 (default) — items stay at their natural width
• flex-grow: 1 — item expands to fill available space
• The value is a ratio — flex-grow: 2 gets twice the extra space as flex-grow: 1
• Only remaining space is distributed, not the total container width
• Common pattern: give one item flex-grow: 1 to fill space next to fixed-width items