flex-grow property

The flex-grow property determines how much larger a single flex block can be than neighboring elements, if necessary.

For example, if all flex boxes inside a flex container have flex-grow:1, then they will be the same size. If one of them has flex-grow:2, then it will be 2 times larger than all the others.

If the total width of the elements is less than the width of the parent, therefore there is an empty space on the right. If desired, this empty space can be proportionally divided between our elements. This is done using the flex-grow property given to flex elements. The value of this property is a dimensionless number.

It applies to: a specific flex block.

This property is included as an part of the shorthand flex property.

Syntax

selector {
	flex-grow: positive number;
}

Default value: 0.

Example

Now we have two flex blocks with a width of 100px. Their total element width is 200px, and the width of the parent is 300px. It turns out that there remains free space of 100px.

If the elements are not given flex-grow, then we will simply see this free space. If it is given to them, then the actual width of the elements will be greater than the given one - they will proportionally divide the free space among themselves and add it to their width.

For example, let the first element have flex-grow equal to 1, and the second element equal 3. Let's calculate how much free space each element will get.

First we need to get the total number of flex-grow units of all our elements. For the first element it is equal to 1, and for the second element it is 3. This means that in total it is equal to 4.

Now let's divide 100px of free space by 4 and get that 25px is accounted for by one flex-grow unit. It turns out that one flex-grow unit will be added to the first element, that is 25px, and three units will be added to the second element, that is 75px.

The width of the first element will be 125px, and the second - 175px:

<div class="parent">
	<div class="child elem1">1</div>
	<div class="child elem2">2</div>
</div>

.parent {
	display: flex;
	width: 300px;
	height: 200px;
	border: 1px solid red;
}
.child {
	height: 50px;
	border: 1px solid green;
}
.elem1 {
	width: 100px;
	flex-grow: 1;
}
.elem2 {
	width: 100px;
	flex-grow: 3;
}

Example

Let now the width of the parent be 400px, the width of the first element 200px, and the width of the second element 100px. It turns out that the free space is again equal to 100px.

Let's give each element a flex-grow equal to 1. The total will be 2, that is, 100px of free space must be divided by 2. It turns out that 50px falls on one unit of greed.

Since all elements have the same flex-grow value, the same value of 50px will be added to all elements. This means that the first element will become 250px, and the second will become 150px:

<div class="parent">
	<div class="child elem1">1</div>
	<div class="child elem2">2</div>
</div>

.parent	{
	display: flex;
	width: 400px;
	height: 200px;
	border: 1px solid red;
}
.child {
	height: 50px;
	border: 1px solid green;
}
.elem1 {
	width: 200px;
	flex-grow: 1;
}
.elem2 {
	width: 100px;
	flex-grow: 1;
}

Example

Let again the width of the parent be 400px, the width of the first element be 200px, and the width of the second element be 100px.

Let's now set the first flex-grow element to the value 3, and the second element to the value 1. It turns out that the total greed is 4. Then one greed unit is equal to 100px / 4 = 25px.

75px will be added to the first element, and it will become 275px, and 25px will be added to the second element, it will become 125px:

<div class="parent">
	<div class="child elem1">1</div>
	<div class="child elem2">2</div>
</div>

.parent	{
	display: flex;
	width: 400px;
	height: 200px;
	border: 1px solid red;
}
.child {
	height: 50px;
	border: 1px solid green;
}
.elem1 {
	width: 200px;
	flex-grow: 3;
}
.elem2 {
	width: 100px;
	flex-grow: 1;
}

flex-grow property

Syntax

Example

Example

Example

See also