In this section, we will learn what the flex-grow property is and how to use it in CSS.

CSS flex-grow Property Definition and Usage

By default, the space that a flex-item takes within a flex-container is equal to its width. But there’s a chance that the total width of the entire flex-items within a flex-container doesn’t fill the available space that the flex-container provides.

In the picture above, we have a flex-container with the width of 100px. There are 3 items each has a width of 25px and they occupied 75px of the total 100px width.

As you can see, we have 25px unused space.

CSS provided a property named `flex-grow` by which we can make one or multiple flex-items to grow more than their original size in order to fill the free space.

CSS flex-grow Property Syntax

flex-grow: number|initial|inherit;

CSS flex-grow Property Value

The value we set for `flex-grow` property is unit-less non-negative number (negative numbers don’t have any effect).

Note: the default value is 0 and it means no growth

How Does CSS flex-grow Property Work?

This is how `flex-grow` works:

In our example, let’s say we set the second element to `flex-grow: 2` and the last element to `flex-grow: 1`.

What this means is that we’re asking the browser to first divide the free space within the flex-container into 3 equal blocks.

We say 3 equal blocks, because the total number set for `flex-grow` property in all flex-items in this example is 3. If the total number was 5 then we had 5 equal blocks and so on.

Then, because the second element has `flex-grow: 2` it means the width of this element should increase by 2 blocks. Also, the third element has `flex-grow: 1` and that means the width of this element should increase by 1 block.

This is the final result:

As you can see, using `flex-grow` property, we can simply divide the available free space into equal blocks and add them to flex-items depending on the values they have set for the `flex-grow` property.

Example: flex-grow property in CSS

In the example below, we didn’t use any `flex-grow` property and so there’s available space to be filled.

See the Pen flex-grow property in CSS by Omid Dehghan (@enjoytutorials1) on CodePen.

Now, let’s used flex-grow property to fill the empty space within the flex-container:

See the Pen Now, let’s used flex-grow property to fill the empty space within the flex-container: by Omid Dehghan (@enjoytutorials1) on CodePen.