CSS Flexbox

Flex grow

The flex-grow property specifies how much an element is allowed to grow in the main axis compared to the other sibling elements.

If we set flex-grow to 0, an element does not grow in size at all. If flex-grow is set to the same value for all sibling elements they will all receive the same proportion of the remaining space.

Code example: no growth

Copy
.box {
  flex-grow: 0;
  flex-basis: 8.0rem;
  height: 8.0rem;
}

produces

Code example: even growth

Copy
.box {
  flex-grow: 1;
  flex-basis: 8.0rem;
  height: 8.0rem;
}

produces

Code example: uneven growth

Copy
.box {
  flex-grow: 1;
  flex-basis: 8.0rem;
  height: 8.0rem;
}

.red {
  flex-grow: 2;
}

produces

We can see how the red box grows more than its sibling elements.