CSS flex-grow Property


The flex-grow property is a sub-property of the Flexible Box Layout module. It defines the ability for a flex item to grow if necessary. It accepts a unitless value that serves as a proportion. It dictates what amount of the available space inside the flex container the item should take up.

The flex-grow property specifies how much the item will grow relative to the rest of the flexible items inside the same container.

The flex-grow property specifies how much the item will grow compared to others item inside that container. In other words, it is the ability of an item to grow compared to other items present inside the same container.

Note: If the element is not a flexible item, the flex-grow property has no effect.

CSS Syntax

flex-grow: number|initial|inherit;
Property values:
  • number: A number that defines how the item will grow compare to other flexible items.
  • initial: It sets the value to it’s default value.
  • inherit: It inherit the property from it’s parent elements.

Supported Browsers:

  • Firefox: 52.0, 2.0 -moz-
  • Google Chrome: 50.0, 4.0 -webkit-
  • Internet Explorer: 10.0
  • Safari: 9.0, 3.1 -webkit-
  • Opera: 37.0, 15.0 -webkit-, 11.1

Example -