The flex-grow property is a CSS flexbox property that defines the ability for a flex item to grow if necessary. It accepts a unitless value that serves as a proportion. It dictates what amount of the available space inside the flex container the item should take up.

How it Works

When a flex container has extra space (the container is larger than the combined size of all items), flex-grow determines how that space is distributed.

• If all items have flex-grow: 1, the remaining space is distributed equally to all children.
• If one child has flex-grow: 2 and the others have 1, the remaining space is distributed in a 2:1 ratio.
• The default value is 0, meaning items will not grow.

Calculation

The browser calculates the free space by subtracting the total flex-basis of all items from the container width. This free space is then allocated based on the grow factors.

Best Practices

Use flex-grow in conjunction with flex-shrink and flex-basis (often via the flex shorthand) to create responsive, fluid layouts without hardcoded widths.