flex-grow

Defines how a flex item grows to fill the available extra space in the container.

Default value: 0 (does not grow).
If you set a number greater than 0, the item will grow proportionally according to that value.

Example

The child-1 item keeps its size because its flex-grow is 0, and the others grow in proportion to their value. Change the flex-grow of child-3 and compare how much free space it takes against child-2.

Select the flex-grow of child-3:

0123

ResultLiveContainer width100%

html

<div class="container">
  <span class="child-1">1</span>
  <span class="child-2">2</span>
  <span class="child-3">3</span>
</div>

<div class="container">
  <span class="child-1">1</span>
  <span class="child-2">2</span>
  <span class="child-3">3</span>
</div>

css

.container {
  border: 1px solid #2b7de0;
  display: flex;
  gap: 1rem;
  padding: 0.5rem;
}

.child-1 {
  flex-grow: 0;
  padding: 1rem;
}

.child-2 {
  flex-grow: 1;
  padding: 1rem;
}

.child-3 {
  background: #d9d2f5;
  flex-grow: 2;
  padding: 1rem;
}

.container {
  border: 1px solid #2b7de0;
  display: flex;
  gap: 1rem;
  padding: 0.5rem;
}

.child-1 {
  flex-grow: 0;
  padding: 1rem;
}

.child-2 {
  flex-grow: 1;
  padding: 1rem;
}

.child-3 {
  background: #d9d2f5;
  flex-grow: 2;
  padding: 1rem;
}

Edit the code or use the selectors: the result updates instantly.