What does flex-grow control and how is extra space distributed?

flex-grow is a ratio that decides how much of the container's leftover space each item soaks up relative to its siblings.

After every item has been given its flex-basis, there's often spare room left over in the container. flex-grow shares out that extra space — and it's a proportion, not a fixed amount. An item with flex-grow: 3 claims three times the share of an item with flex-grow: 1.

#parent div {
  flex-basis: 5%;
  /* All items grow by an equal share */
  flex-grow: 1;
}
#parent div:nth-child(3) {
  /* The 3rd item grabs 3x the share of the others */
  flex-grow: 3;
}

Worked example (4 items, 80% of the row is spare space):

• Total of all grow factors = 1 + 1 + 3 + 1 = 6 shares
• Items 1, 2, 4 (factor 1): each gets 80% × (1/6) ≈ 13.3%
• Item 3 (factor 3): gets 80% × (3/6) = 40%

So final widths are roughly 18.3% for items 1, 2, 4 (5% basis + 13.3%) and 45% for item 3 (5% + 40%). The grow factors are denominators of a shared pie, not absolute widths.

Go deeper:

• Flexbox Froggy — 24-level game that drills flex-grow, justify-content, align-items and the rest into muscle memory.