flex-grow

Distribute positive free space between flex items.

Overview

Examples

Let an item grow

flex-grow divides positive free space between items. These two items start with equal 64px bases; grow factors of 1 and 2 give the second item twice as much additional space. The ratio applies to the added space, not their final widths.

<div id="layout" class="flex gap-md">  <div id="target" class="flex-basis:4rem flex-grow:1 h:6rem min-w:0 p-sm">Grow 1</div>  <div id="peer" class="flex-basis:4rem flex-grow:2 h:6rem min-w:0 p-sm">Grow 2</div></div>

@layer utilities {  .flex-grow\:1 {    flex-grow: 1  }  .flex-grow\:2 {    flex-grow: 2  }}

Padding is included in each item’s basis here because the site uses border-box sizing. The 16px gap is removed from the available space before it is distributed.

Leave free space to a sibling

flex-grow:0 opts out of positive free space. The blue item stays at its 96px basis while the violet sibling grows. It can still shrink if space becomes tight; use flex:none or flex-shrink:0 when shrinkage must also be disabled.

<div id="layout" class="flex gap-md">  <div id="target" class="flex-basis:6rem flex-grow:0 h:6rem min-w:0 p-sm">Grow 0</div>  <div id="peer" class="flex-basis:4rem flex-grow:1 h:6rem min-w:0 p-sm">Main content</div></div>

Apply conditionally

Use conditional queries to enable growth only when its breakpoint matches. Both items start at 80px; below sm, unused space remains at the end. Above it, the blue item absorbs that space.

<div id="layout" class="flex gap-md">  <div id="target" class="flex-basis:5rem flex-grow:0 h:6rem min-w:0 p-sm flex-grow:1@sm">Target</div>  <div id="peer" class="flex-basis:5rem flex-grow:0 h:6rem min-w:0 p-sm">Peer</div></div>

Growth needs a flex parent and positive free space. Use flex when the grow, shrink and basis values should be set together.