Flex Grow Property
Last updated: 2026-09-13
flex-grow Flex Grow Property
The flex-grow property sets the growth factor of a flex item. It decides how much of the remaining space in the container the item is allowed to take. The default value is 0, which means the item does not grow and keeps its original size. Larger values give the item a bigger share: the remaining space is distributed among all items in proportion to their flex-grow values.
| Category | |
|---|---|
| Initial Value | 0 |
| Inherited | No |
| Applies To | flex-items |
| Animation Type | number |
| CSS Version | CSS3 |
| Status | Standard |
📝 Syntax
flex-grow: <number>;⚙️ Values
| Value | Type | Description |
|---|---|---|
<number> | Type | Growth factor; 0 means the item does not grow |
▶ Example
Edit the code below and see the live result in the playground:
🌐 Browser Support
| Browser |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| flex-grow | ✓ v29 | ✓ v12 | ✓ v28 | ✓ v9 | ✓ v17 |
| Supported in all major browsers | |||||
Tip： flex-grow is a unitless proportion and accepts no negative values. The remaining space is shared according to the ratio of the flex-grow values, for example 1:2:3 distributes the space as 1/6, 2/6 and 3/6.
Warning： flex-grow only takes effect when the container has leftover space. If the items already fill the container width, flex-grow will not shrink them; use flex-shrink for that.
❓ FAQ
QCan flex-grow be a decimal number?
AYes. flex-grow accepts any non-negative number, including decimals, so flex-grow: 0.5 is valid. The remaining space is divided according to the relative ratio of all flex-grow values, which means a 0.5 and 1 combination behaves exactly like 1 and 2; only the ratio matters. Small decimals such as 0.5 or 0.3 are handy when you want an item to grow slightly without doubling in size.
QWhy doesn’t my item grow even though I set flex-grow?
ACommon reasons: the container has no leftover space because the items already fill the whole width, the parent forgot to set display: flex, or flex-basis is auto and the content already pushes the base size to its maximum. First check whether the container is wider than the total item width, then review flex-basis: to let flex-grow take over the distribution completely, usually set flex-basis to 0.
QWhat does “flex-grow distributes leftover space, not the full width” mean?
AFlex first lays out every item according to flex-basis, which defaults to auto, i.e. the content width. What remains is the leftover space, and only that part is split proportionally by flex-grow. For a 600px container whose three items’ content totals 300px, only the remaining 300px is distributed. So with the default flex-basis, flex-grow: 1 does not produce equal-width items unless flex-basis is set to 0.
🏷️ Related Properties
💡 Related Cases
📚 Related Tutorials
Flex Shorthand
Shorthand for flex-grow, flex-shrink and flex-basis
Flex Shrink
Controls how much a flex item shrinks
