flex-grow

The flex-grow CSS property sets the flex grow factor, which specifies how much of the flex container’s positive free space, if any, should be assigned to the flex item’s main size.

When the flex-container’s main size is larger than the combined main sizes of its flex items, this positive free space can be distributed among the flex items, with each item’s growth being their growth factor value as a proportion of the sum total of all the flex items’ flex grow factors.

Note: It is recommended to use the flex shorthand with a keyword value like auto or initial instead of setting flex-grow on its own. The keyword values expand to reliable combinations of flex-grow, flex-shrink, and flex-basis, which help to achieve the commonly desired flex behaviors.

Syntax example: flex-grow: 3;