CSS flex-grow Property: Control How Flex Items Expand

Defines the ability for a flex item to grow if necessary. It accepts a unitless value that serves as a proportion; it dictates how much of the available space inside the flex container the item should take up.

Quick example

.sidebar { flex-grow: 0; } /* stays fixed width */
.main-content { flex-grow: 1; } /* grows to fill all remaining space */

Syntax

flex-grow: <number>

0

Default. The item does not grow. It stays at the size defined by flex-basis or its content width.

1

The item takes an equal share of the remaining space alongside other items with flex-grow: 1.

Any positive number

The item takes a proportional share. An item with flex-grow: 2 gets twice the leftover space of an item with flex-grow: 1.

Quick facts

Initial value

0

Inherited

Applies to

flex items and in-flow pseudo-elements

Animation type

number

Examples

One item fills remaining space

.sidebar {
  width: 240px;
  flex-grow: 0;
}
.main {
  flex-grow: 1;
}

The sidebar stays at its fixed width. The main area grows to fill whatever space is left.

Equal columns

.column {
  flex-grow: 1;
  flex-basis: 0;
}

All columns get an equal share of space. flex-basis: 0 means the base size is ignored, so distribution is based on flex-grow alone.

Proportional columns

.main {
  flex-grow: 2;
}
.aside {
  flex-grow: 1;
}

The main column gets twice as much leftover space as the aside column.

flex-grow Browser Support

Widely available Since 2015 96% global usage

This feature is well established and works across many devices and browser versions. It has been available across browsers since 2015.

Safe to use without fallbacks.

View on caniuse.com → View on MDN → View on webstatus.dev → Learn more about Baseline →

29+

20+

12+

Common pitfalls

flex-grow does not mean width

flex-grow distributes leftover space, not total width. If one item has large content, it may end up wider than its flex-grow ratio suggests. Pair with flex-basis: 0 for true proportional widths.

Default flex-basis affects distribution

The default flex-basis is auto, which uses content size as the base. Two items with flex-grow: 1 will only be equal widths if their content is the same size. Set flex-basis: 0 for predictable equal columns.

flex-grow vs the flex shorthand

flex: 1 is shorthand for flex: 1 1 0%, which sets flex-grow: 1, flex-shrink: 1, and flex-basis: 0. Writing flex-grow: 1 on its own leaves flex-basis at auto, which changes how space gets distributed.