CSS flex-grow Property

Definition and Usage

The flex-grow property sets a flex item’s grow factor — how much of the container’s leftover main-axis space it should take compared with its siblings.

The initial value is 0 (do not grow). Use a non-negative number such as 1 or 2. It applies only to flex items inside a display: flex (or inline-flex) container. It is not inherited. For everyday layouts, MDN also recommends the flex shorthand, which sets grow, shrink, and basis together.

CSS Syntax

One non-negative number. Examples: 0, 1, 2, 0.5.

Property Values

How to Use flex-grow

Make a flex row, then decide which children should absorb leftover width.

1. Set the parent to display: flex.
2. Leave room on the main axis (a wide container, or short content).
3. Set flex-grow on items that should expand (1 is the usual equal share).
4. Compare with flex-shrink and flex-basis, or use the flex shorthand.

Live Preview

Item A’s flex-grow changes. B and C stay at 1.

CSS Examples

Each snippet focuses on flex-grow. The parent is flex only so growth can show. Use Try It Yourself for a live editor.

<style>
  .row {
    display: flex;
  }

  .item {
    flex-grow: 0;
  }
</style>

<div class="row">
  <div class="item">A</div>
  <div class="item">B</div>
  <div class="item">C</div>
</div>

<style>
  .row {
    display: flex;
  }

  .item {
    flex-grow: 1;
  }
</style>

<div class="row">
  <div class="item">A</div>
  <div class="item">B</div>
  <div class="item">C</div>
</div>

<style>
  .row {
    display: flex;
  }

  .a { flex-grow: 1; }
  .b { flex-grow: 2; }
</style>

<div class="row">
  <div class="a">A (1)</div>
  <div class="b">B (2)</div>
</div>

Key Takeaways