flex-grow defaults to 0, meaning an item won't grow at all beyond its own natural or specified size even if the container has leftover space — a nonzero value tells the item to expand and absorb a share of that leftover space, and when several items all have a nonzero flex-grow, the leftover space is distributed proportionally according to their relative flex-grow values, so an item with flex-grow: 2 grows twice as much as a sibling with flex-grow: 1, and an item with flex-grow: 1 amid an otherwise flex-grow: 0 layout absorbs the entirety of the leftover space by itself.
1Understanding Flex-grow
flex-grow defaults to 0, meaning an item won't grow at all beyond its own natural or specified size even if the container has leftover space — a nonzero value tells the item to expand and absorb a share of that leftover space, and when several items all have a nonzero flex-grow, the leftover space is distributed proportionally according to their relative flex-grow values, so an item with flex-grow: 2 grows twice as much as a sibling with flex-grow: 1, and an item with flex-grow: 1 amid an otherwise flex-grow: 0 layout absorbs the entirety of the leftover space by itself.
Setting flex-grow: 1 on a single flex item, with every other sibling left at the default flex-grow: 0, causes that one item alone to absorb the entirety of the container's leftover space, a common, simple technique for pushing one specific item, like a search bar, to fill the remaining room in a row.
.search-bar {
flex-grow: 1;
}
/* sibling buttons left at default flex-grow: 0 */2Practical Example
Here is a real-world application of Flex-grow showing how it is used in production CSS code.
.item-a { flex-grow: 1; }
.item-b { flex-grow: 2; }3Best Practices
Follow these guidelines when working with Flex-grow:
1. Set flex-grow: 1 on a single item that should expand to fill all remaining leftover space, leaving its siblings at the default flex-grow: 0
2. Use proportional flex-grow values, like 1 and 2, when several items should share leftover space unevenly, in specific relative proportions to each other
3. Remember flex-grow only distributes leftover space — it has no effect at all if the container's items already fill or exceed the container's total size, with no leftover space left to distribute
Tip: Setting flex-grow: 1 on a single flex item, with every other sibling left at the default flex-grow: 0, causes that one item alone to absorb the entirety of the container's leftover space, a common, simple technique for pushing one specific item, like a search bar, to fill the remaining room in a row.
.search-bar {
flex-grow: 1;
}
/* sibling buttons left at default flex-grow: 0 */