Dole out the left-over space

flex-grow

Specifies how much of the container's left-over space should be given to this element.

Property values

This property is meaningful only on elements that are directly within a flexbox container. Specify a numeric value that has no units. That value will be used in the algorithm that divies up the container's extra space.

Set this property to 0 in order to prevent the element from growing beyond its initial basis.

When a flexbox container has left-over space, each item is allowed to grow to fill up that space. But if the total width of all elements is larger than the width of the container itself, then none of the elements will grow.

This property determines how much of the container's extra space is allocated to this element, using this formula:

    W = container's width

/* individual element widths */
fb[0] = element[0] flex-basis (or width)
fb[1] = element[1] flex-basis (or width)
fb[N-1] = element[N-1] flex-basis (or width)

/* total of all element's widths */
T = sum(fb[0] + fb[1] + ... + fb[N-1])

/* container's remaining left-over space */
R = W - T

/* individual element grow-factors */
gf[0] = element[0] flex-grow factor
gf[1] = element[1] flex-grow factor
gf[N-1] = element[N-1] flex-grow factor

/* total of all grow-factors */
G = sum(gf[0] + gf[1] + ... + gf[N-1])

/* extra width to add to each element's original width */
ew[0] = gf[0]/G * R
ew[1] = gf[1]/G * R
ew[N-1] = gf[N-1]/G * R

Examples

flex-grow: 2;
flex-grow

style > flexbox > flex-growDole out the left-over space

Q