flex-grow

flex-grow sets a flex item’s share of positive main-axis free space. A grow factor compares added space, not necessarily the items’ final widths or heights.

Growth from equal bases

The 240px container has two 60px bases, leaving 120px free. Factors 2 and 1 add 80px and 40px respectively, producing 140px and 100px here.

<div class="row">
  <div class="first">Grow 2</div>
  <div class="second">Grow 1</div>
</div>

.row {
  display: flex;
  width: 240px;
}
.row > div {
  flex-basis: 60px;
  flex-shrink: 0;
  min-width: 0;
  background: #dbeafe;
}
.first {
  flex-grow: 2;
}
.second {
  flex-grow: 1;
}
.row > .second {
  background: #bfdbfe;
}

Use the remaining room for a title

Only the title grows. The badge keeps its content-based size, making the difference between free-space distribution and ordinary content sizing clear.

<div class="row">
  <p class="title">CSS layout workshop</p>
  <span class="badge">Open</span>
</div>

.row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.title {
  flex: 1 1 auto;
  min-width: 0;
}
.badge {
  flex: 0 0 auto;
  padding: 0.25rem 0.5rem;
  background: #eff6ff;
}

Values and limitations

The initial value is 0 and flex-grow is not inherited. Values are nonnegative numbers; zero does not request growth. Factors are relative, with additional algorithm details when their sum is below 1: some free space can remain undistributed. Use a consistent tested sizing rule rather than treating fractions as percentages of the whole container.

Growth happens only when there is positive free space. A content-sized container, a large basis, or max-size constraints can leave no visible growth. A bigger factor does not guarantee a bigger final box when bases differ.

Use the shorthand deliberately

Flex sets basis, shrink, and grow together. Equal growth factors with content-based bases do not necessarily produce equal columns. Try changing the first basis in this example, then inspect final widths. Learn flex-basis before assuming the factor controls everything.

Sources and browser support

MDN: flex-grow describes the syntax and links to the specification and compatibility data. Check individual values in that table when supporting older browsers.