59. Flex Item Property: flex-grow

flex-grow defines the ability of a flex item to grow if necessary, filling up the remaining space in the container along the main axis.

How Flex Grow Works

• flex-grow takes a unitless number (a ratio). Default is 0 (items will not grow beyond their content size).
• The ratio determines how free space is divided among the growing items.

Example 1: Equal Growth

If you have 100px of extra space, and two items have flex-grow: 1:

css .item { flex-grow: 1; } /* Each item takes 50px of the available space */

Example 2: Unequal Growth

If item A has flex-grow: 1 and item B has flex-grow: 2:

css .item-a { flex-grow: 1; /* Takes 1/3 of the extra space */ }

.item-b { flex-grow: 2; /* Takes 2/3 of the extra space */ }

Note: flex-grow only distributes positive free space (when the container is larger than the total size of its items). If the items already exceed the container, flex-grow does nothing.