flex-grow | WebReference

Definition

The flex-grow property in CSS defines the ability of a flex item to grow and take up unused space within a flex container.

Set the flex-grow property to 1 (the default value):

.flex-item {
  flex-grow: 1;
}

Set the flex-grow property to 2:

.flex-item {
  flex-grow: 2;
}

Set the flex-grow property to 0:

.flex-item {
  flex-grow: 0;
}

Value	Description
`<number>`	A non-negative number that defines the ability of a flex item to grow and take up unused space within a flex container. The default value is 1. A value of 0 means the flex item will not grow.
`initial`	Use the default value defined by the browser.
`inherit`	Use the value of the parent element.

Consider using the flex-grow property in conjunction with other flexbox properties such as flex-shrink and flex-basis to control the size of flex items.
Make sure to provide a meaningful fallback for browsers that do not support the flex-grow property.
Keep in mind that the value of flex-grow affects the size of flex items along the main axis of the flex container.
Use the flex-grow property in combination with media queries to create responsive designs that adjust to different screen sizes.
Be mindful of the relationship between flex-grow and other flexbox properties like flex-basis and flex-shrink.

Chrome	Firefox	Safari	Internet Explorer	Microsoft Edge	Opera
Yes	Yes	Yes	Yes	Yes	Yes