flex-grow CSS property

Try it

flex-grow: 1;

flex-grow: 2;

flex-grow: 3;

<section class="default-example" id="default-example">
  <div class="transition-all" id="example-element">I grow</div>
  <div>Item Two</div>
  <div>Item Three</div>
</section>

.default-example {
  border: 1px solid #c5c5c5;
  width: auto;
  max-height: 300px;
  display: flex;
}

.default-example > div {
  background-color: rgb(0 0 255 / 0.2);
  border: 3px solid blue;
  margin: 10px;
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 0;
}

Syntax

/* <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 four items is 400px, meaning there is 300px of positive free space to be distributed. The sum of the four grow factors (0 + 1 + 2 + 3 = 6) is equal to six. Therefore, each grow factor is equal to 50px ((300px / 6 ). Each flex item is given 50px of free space multiplied by its flex-grow factor — so 0, 50px, 100px, and 150px respectively. The total flex item sizes become 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

Formal syntax

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

Examples

Setting flex item grow factor

In this example, the sum of six flex-grow factors is equal to eight, meaning each growth-factor value is 12.5% of the remaining space.

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="box1">A</div>
  <div class="box2">B</div>
  <div class="box3">C</div>
  <div class="box4">D</div>
  <div class="box5">E</div>
  <div class="box6">F</div>
</div>

CSS

#content {
  display: flex;
}

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

.box1,
.box2,
.box3,
.box6 {
  flex-grow: 1;
}

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

.box1 {
  background-color: red;
}
.box2 {
  background-color: lightblue;
}
.box3 {
  background-color: yellow;
}
.box4 {
  background-color: brown;
}
.box5 {
  background-color: lightgreen;
}
.box6 {
  background-color: brown;
}

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

Browser compatibility

See also

• flex shorthand
• Basic Concepts of Flexbox
• Controlling Ratios of flex items along the main axis
• CSS flexible box layout module
• flex-grow is weird. Or is it? via CSS-Tricks (2017)