Use flex-grow when a row or column has leftover room and one item should take more of it. A pricing card, for example, can become more prominent than its neighbors without assigning it a fixed final width. The property distributes positive free space along the container’s main axis: width in a row and height in a column. section 5.1 section 5.2 section 5.2.1
Each flex item starts with a flex base size. After those starting sizes are allocated, subtract their total from the container’s main size to find unused space. An item’s grow factor is its share of that space: divide its flex-grow value by the sum of all grow factors, then add that allocation to its base size. The default flex-grow value is 0, so an item does not expand unless configured to do so. section 5.1 section 5.2.1 section 5.4
Three items sharing 300px of free space
In a 600px row, three 100px items occupy 300px before growth, leaving 300px. With grow factors 1, 2, and 3, their shares are 1/6, 2/6, and 3/6 of the free space: 50px, 100px, and 150px. Their final widths become 150px, 200px, and 250px. The factors are ratios, not final widths. section 5.2.1
Listing 5.2 The flex-grow calculation
.container {
display: flex;
flex-direction: row;
width: 600px;
}
.item-1 {
flex-grow: 1;
flex-basis: 100px;
}
.item-2 {
flex-grow: 2;
flex-basis: 100px;
}
.item-3 {
flex-grow: 3;
flex-basis: 100px;
}
Inspect the CSS for the 600px container and three equal 100px bases with grow factors 1, 2, and 3, then verify the proportional result. section 5.2.1
Values between 0 and 1 need special attention. When the total of all grow factors is at least 1, they remain relative shares; a factor of 0.5 can participate alongside 2 and 3.5. When every factor is between 0 and 1 and their total is below 1, each value instead requests that percentage of the free space, so unused space can remain. section 5.2.4 section 5.5
Keep these interactions in view when a layout surprises you:
- flex-basis establishes the base size used before growing; when it is auto, width or intrinsic size can determine that starting point. section 5.1 section 5.5
- flex-shrink handles the opposite case: insufficient space rather than unused space. section 5.2 section 5.5
- The flex shorthand sets flex-grow, flex-shrink, and flex-basis together. A later flex declaration can override a separate flex-grow rule. section 5.2.3 section 5.4
- min-width and max-width are hard limits that can force free space to be redistributed after an item reaches a bound. section 5.5
Prefer an explicit flex shorthand when configuring a complete flex-item policy, rather than mixing separate grow, shrink, and basis declarations whose later shorthand overrides may be hard to spot. For an item that should neither grow nor shrink, use a shorthand that sets all three values deliberately. section 5.2.3 section 5.2.3
