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.