New! My 44-page ebook "CSS in 44 minutes" is out! 😃

Get it now →

#flex-grow

Defines how much a flexbox item should grow if there's space available.

default flex-grow: 0;

The element will not grow if there's space available. It will only use the space it needs.

flex-grow: 1;

The element will grow by a factor of 1. It will fill up the remaining space if no other flexbox item has a flex-grow value.

flex-grow: 2;

Because the flex-grow value is relative, its behaviour depends on the value of the flexbox item siblings.

In this example, the remaining space is divided in 3:

  • 1 third goes to the green item
  • 2 thirds go to the pink item
  • Nothing goes to the yellow item, who retains its initial width