Flex Grow

Utilities for controlling how flex items grow.

Class Name	CSS Equivalent
grow	flex-grow: 1;
grow-0	flex-grow: 0;

Grow

The .grow class sets an element's flex-grow property to 1. This allows the element to grow and distribute available space within the flex container.

<div class="flex gap-m w-full">
  <div class="[...]">1</div>
  <div class="grow [...]">2</div>
  <div class="[...]">3</div>
</div>

1

2

3

Grow-0

The .grow-0 class sets an element's flex-grow property to 0. This prevents the element from growing, and it maintains its original size within the flex container.

<div class="flex gap-m w-full">
  <div class="grow [...]">1</div>
  <div class="grow-0 [...]">2</div>
  <div class="grow [...]">3</div>
</div>

1

2

3