flex-grow is a flexbox property for sharing leftover room. Think of a flex container as a row or column with a little spare space after its items have been placed. By default, every flex item has flex-grow: 0, so that spare space stays empty. Give an item a positive value and it expands into the available space. section 12.6
item {
flex-grow: value;
}
Apply flex-grow to the flex item you want to expand. Replace value with a positive number when the item should claim some empty space. section 12.6
The numbers act like shares of the empty space:
- One growing item gets all available empty space, whatever positive number it uses. section 12.6
- Items with equal positive values split available empty space evenly. section 12.6
- Items with different values split space in proportion to those values. Values of 1, 2, and 1 give 25%, 50%, and 25% of the empty space. section 12.6
A roomy article and a smaller sidebar
In a two-item layout, article { flex-grow: 3; } and aside { flex-grow: 1; } divide available horizontal space into four shares. The article receives three shares, or 75%, while the sidebar receives one share, or 25%. The values describe the spare space allocation, not a fixed width recipe. section 12.17 section 12.6
flex-grow can also solve the classic “footer should sit at the bottom” layout. Make the page body a vertical flex container, give it min-height: 100vh, and set main to flex-grow: 1. The main area uses empty vertical space, leaving the footer at the bottom when page content is short. section 12.17
For flexible groups of blocks, flex-grow works alongside flex-wrap, flex-basis, and flex-shrink. Growing items can preserve desired proportions; wrapping handles narrow viewports; a basis and disabled shrinking can establish a minimum block size. That combination is useful when replacing fragile faux-column layouts. section 13.9 section 12.18
Try a quick share test
Create three flex items and try flex-grow values of 1, 1, and 1. Then change the middle value to 2. Watch the middle item take half of the available empty space while the outer items take one quarter each. Next, try the same idea in a thumbnail list, where an image sits beside descriptive text. section 12.6 section 12.8
