Layout
flex-grow
flex-grow goes on a flex item and sets how much of the leftover width (or height, in a column) of the container the item takes to grow.
Syntax
<number [0,∞]>Preview
Code
.box {
display: flex;
}
.box > :nth-child(2) {
flex-grow: 1;
}Controls
About
Values
Write a number of 0 or more without a unit. The initial value is 0, which does not grow. It goes on the items inside, not on the flex container.
The preview on this page makes the box display: flex with a helper declaration and puts flex-grow on the second item only (.box > :nth-child(2) is a selector for the second child of the box). The outlined item 2 grows to fill the width the other items leave.
How the leftover space is shared
First each item is laid out at its base size (flex-basis, or width with the initial auto), then the leftover width is shared in the ratio of the flex-grow values. Items with 1 and 2 share it 1 : 2. If only one item grows, it takes all of it, whether the value is 1 or 2.
When the values add up to less than 1, not all of the space is handed out. A single item with 0.5 grows by half of the leftover space.
The flex shorthand
It is usually written with flex-shrink and flex-basis in the flex shorthand. flex: 1 is the same as flex: 1 1 0%, which treats the base size as 0, so items get equal widths whatever their content. With flex-grow alone, the base size comes from the content, so sharing the leftover equally does not make the items the same width.