flex-grow

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.

The flex-grow CSS property sets the flex grow factor, which specifies how much of the flex container's positive free space, if any, should be assigned to the flex item's main size.

When the flex-container's main size is larger than the combined main sizes of its flex items, this positive free space can be distributed among the flex items, with each item's growth being their growth factor value as a proportion of the sum total of all the flex items' flex grow factors.

Try it

Syntax

css
/* <number> values */
flex-grow: 3;
flex-grow: 0.6;

/* Global values */
flex-grow: inherit;
flex-grow: initial;
flex-grow: revert;
flex-grow: revert-layer;
flex-grow: unset;

The flex-grow property is specified as a single <number>.

Values

<number>

See <number>. Negative values are invalid. Defaults to 0, which prevents the flex item from growing.

Description

This property specifies how much of the remaining space in the flex container should be assigned to the item (the flex grow factor).

The main size is either the width or height of the item, depending on the flex-direction value.

The remaining space, or positive free space, is the size of the flex container minus the size of all flex items' sizes together. If all sibling items have the same flex grow factor, then all items will receive the same share of remaining space. The common practice is to set flex-grow: 1, but setting the flex grow factor for all the flex items to 88, 100, 1.2, or any other value greater than 0 will produce the same result: the value is a ratio.

If the flex-grow values differ, the positive free space is distributed according to the ratio defined by the different flex grow factors. The flex-grow factor values of all the sibling flex items are added together. The flex container's positive free space, if any, is then divided by that total. The main size of each flex item with a flex-grow value greater than 0 will grow by this quotient multiplied by its own growth factor.

For example, if four 100px flex items are in a 700px container and the flex items have flex-grow factors of 0, 1, 2, and 3, respectively, the total main size of the three items is 400px, meaning there is 300px of positive free space to be distributed. There are a total of 6 grow factors (3 + 2 + 1), therefore each grow factor is equal to 50px ((300px / 6 ). Each flex item is given an amount of positive free space equal to this amount multiplied by its flex-grow value — so 0, 50px, 100px, and 150px respectively. The total flex item sizes are therefore 100px, 150px, 200px, and 250px respectively.

flex-grow is generally used alongside the other flex shorthand properties, flex-shrink and flex-basis. Using the flex shorthand property is recommended to ensure all values are set.

Formal definition

Initial value0
Applies toflex items, including in-flow pseudo-elements
Inheritedno
Computed valueas specified
Animation typea number

Formal syntax

flex-grow = 
<number [0,∞]>

Examples

Setting flex item grow factor

In this example, there is a total of eight growth factors distributed among the six flex items, meaning each growth factor is 12.5% of the remaining space.

HTML

html
<h1>This is a <code>flex-grow</code> example</h1>
<p>
  A, B, C, and F have <code>flex-grow: 1</code> set. D and E have
  <code>flex-grow: 2</code> set.
</p>
<div id="content">
  <div class="small" style="background-color:red;">A</div>
  <div class="small" style="background-color:lightblue;">B</div>
  <div class="small" style="background-color:yellow;">C</div>
  <div class="double" style="background-color:brown;">D</div>
  <div class="double" style="background-color:lightgreen;">E</div>
  <div class="small" style="background-color:brown;">F</div>
</div>

CSS

css
#content {
  display: flex;
}

div > div {
  border: 3px solid rgb(0 0 0 / 20%);
}

.small {
  flex-grow: 1;
}

.double {
  flex-grow: 2;
  border: 3px solid rgb(0 0 0 / 20%);
}

Result

When the six flex items are distributed along the container's main axis, if the sum of the main content of those flex items is less than the size of the container's main axis, the extra space is distributed among the size flex items, with A, B, C, and F, each getting 12.5% of the remaining space and D and E each getting 25% of the extra space.

Specifications

Specification
CSS Flexible Box Layout Module Level 1
# flex-grow-property

Browser compatibility

BCD tables only load in the browser

See also