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="w:24x flex-grow:0">...</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-grow:0 flex-basis:24x">...</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:1@sm flex-grow:0@print">...</div>

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