CSS flex-grow Property

☕

Enjoying this site?

Help keep it running with a small coffee donation. Every bit of support is appreciated!

flex-grow

CSS PropertyThis property is supported by all modern browsers.

Updated 1st January 2026

Description

The flex-grow property controls how a flex item expands to fill leftover space along the flex container’s main axis. During layout the user agent first determines each item’s base size — coming from its content, explicit sizing, or flex-basis — then computes any remaining free space. flex-grow tells the layout engine how to distribute that free space among items that are allowed to grow, so it acts as a relative weighting rather than an absolute dimension.

When multiple items are eligible to expand, the free space is divided proportionally according to their grow factors: an item assigned a larger factor receives a correspondingly larger share of the available space, while an item that cannot grow remains at its base size. Expansion is subject to each item’s intrinsic and imposed constraints, so growth can be limited by things like min-width (or other sizing limits). While another property handles shrinking when space is tight, flex-shrink, flex-grow specifically governs behavior when extra space exists.

In practical layout work, flex-grow is used to create fluid, responsive regions — for example letting one panel absorb leftover horizontal space while its siblings keep their natural sizes. Because it operates on the main axis and is proportional rather than absolute, predictable results usually come from combining appropriate base sizes and sizing constraints with considered grow factors. Keep in mind that growth happens per flex line when items wrap, rounding and constraint enforcement can affect final pixel sizes, and treating flex-grow as “share of leftover space” helps avoid surprises.

Definition

Initial value: 0
Applies to: Flex items, including in-flow pseudo-elements
Inherited: No
Computed value: As specified
Animatable: Yes
JavaScript syntax: object.style.flexGrow

Interactive Demo

flex-grow: 1;

flex-grow: 2;

flex-grow: 3;

Item 1

Item 2

Item 3

Syntax

flex-grow: <number>

Values

<number>Integers (1, 2, 3, ...) or fractional numbers (for example: 0.6) are accepted. Negative values are ignored.

Example

HTML

<div class="container">

    <div class="item item1">Item 1 (flex: 1)</div>

    <div class="item item2">Item 2 (flex: 2)</div>

    <div class="item item3">Item 3 (flex: 3)</div>

</div>

CSS

/* Container */
.container {
    display: flex;
    gap: 12px;
    padding: 16px;
    border: 2px solid #e0e0e0;
    background: #fafafa;
    height: 120px;
}

/* Items */
.item {
    background: linear-gradient(135deg, #5eead4, #7dd3fc);
    color: #06202a;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    min-width: 0;
    padding: 12px;
}

/* Different growth factors */
.item1 { flex: 1; }
.item2 { flex: 2; }
.item3 { flex: 3; }

Result

Open in editor

Browser Support

The following information will show you the current browser support for the CSS flex-grow property. Hover over a browser icon to see the version that first introduced support for this CSS property.

This property is supported by all modern browsers.