flex-grow

Setting how flex items grow.

Overview

Examples

Let an item grow

Use flex-grow:1 on a flex item that should absorb remaining free space.

<div class="flex gap:md">  <aside class="flex-grow:0 w:24x">...</aside>  <main class="flex-grow:1 min-w:0">...</main></div>

@layer utilities {  .flex {    display: flex  }  .flex-grow\:0 {    flex-grow: 0  }  .flex-grow\:1 {    flex-grow: 1  }  .min-w\:0 {    min-width: 0  }}

Keep an item at its basis

Use flex-grow:0 when an item should keep its width or basis and leave free space to siblings.

<aside class="flex-basis:24x flex-grow:0">...</aside>

Use the flex shorthand when grow, shrink, and basis should be set together.

Apply conditionally

Apply styles based on different states using selectors and conditional queries.

<div class="flex-grow:0 flex-grow:0@print flex-grow:1@sm">...</div>

The parent must be a flex container for flex-grow to affect layout.