flex-grow

/* <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>.

<number>

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

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.

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

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

<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

#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.

• 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)