# Source: https://github.com/tailwindlabs/tailwindcss.com/blob/main/src/docs/flex-grow.mdx

import { ApiTable } from "@/components/api-table.tsx";
import { Example } from "@/components/example.tsx";
import { Figure } from "@/components/figure.tsx";
import { ResponsiveDesign, UsingACustomValue } from "@/components/content.tsx";
import { Stripes } from "@/components/stripes.tsx";

export const title = "flex-grow";
export const description = "Utilities for controlling how flex items grow.";

<ApiTable
  rows={[
    ["grow", "flex-grow: 1;"],
    ["grow-<number>", "flex-grow: <number>;"],
    ["grow-[<value>]", "flex-grow: <value>;"],
    ["grow-(<custom-property>)", "flex-grow: var(<custom-property>);"],
  ]}
/>

## Examples

### Allowing items to grow

Use `grow` to allow a flex item to grow to fill any available space:

<Figure>

<Example resizable>
  {
    <div className="grid grid-cols-1">
      <Stripes border className="col-start-1 row-start-1 rounded-lg" />
      <div className="col-start-1 row-start-1 flex gap-4 rounded-lg font-mono text-sm leading-6 font-bold text-white">
        <div className="flex size-14 flex-none items-center justify-center rounded-lg bg-sky-300 dark:bg-sky-800 dark:text-sky-400">
          01
        </div>
        <div className="flex size-14 grow items-center justify-center rounded-lg bg-sky-500 p-4">02</div>
        <div className="flex size-14 flex-none items-center justify-center rounded-lg bg-sky-300 p-4 dark:bg-sky-800 dark:text-sky-400">
          03
        </div>
      </div>
    </div>
  }
</Example>

```html
<!-- [!code classes:grow] -->
<div class="flex ...">
  <div class="size-14 flex-none ...">01</div>
  <div class="size-14 grow ...">02</div>
  <div class="size-14 flex-none ...">03</div>
</div>
```

</Figure>

### Growing items based on factor

Use `grow-<number>` utilities like `grow-3` to make flex items grow proportionally based on their growth factor, allowing them to fill the available space relative to each other:

<Figure>

<Example resizable>
  {
    <div className="grid grid-cols-1">
      <Stripes border className="col-start-1 row-start-1 rounded-lg" />
      <div className="col-start-1 row-start-1 flex gap-4 rounded-lg font-mono text-sm leading-6 font-bold text-white">
        <div className="flex size-14 grow-3 items-center justify-center rounded-lg bg-indigo-300 dark:bg-indigo-800 dark:text-indigo-400">
          01
        </div>
        <div className="flex size-14 grow-7 items-center justify-center rounded-lg bg-indigo-500 p-4">02</div>
        <div className="flex size-14 grow-3 items-center justify-center rounded-lg bg-indigo-300 p-4 dark:bg-indigo-800 dark:text-indigo-400">
          03
        </div>
      </div>
    </div>
  }
</Example>

```html
<!-- [!code classes:grow-3,grow-7] -->
<div class="flex ...">
  <div class="size-14 grow-3 ...">01</div>
  <div class="size-14 grow-7 ...">02</div>
  <div class="size-14 grow-3 ...">03</div>
</div>
```

</Figure>

### Preventing items from growing

Use `grow-0` to prevent a flex item from growing:

<Figure>

<Example resizable>
  {
    <div className="grid grid-cols-1">
      <Stripes border className="col-start-1 row-start-1 rounded-lg" />
      <div className="col-start-1 row-start-1 flex gap-4 rounded-lg font-mono text-sm leading-6 font-bold text-white">
        <div className="flex size-14 grow items-center justify-center rounded-lg bg-pink-300 p-4 dark:bg-pink-800 dark:text-pink-400">
          01
        </div>
        <div className="flex size-14 shrink-0 grow-0 items-center justify-center rounded-lg bg-pink-500">02</div>
        <div className="hidden size-14 grow items-center justify-center rounded-lg bg-pink-300 p-4 md:flex dark:bg-pink-800 dark:text-pink-400">
          03
        </div>
      </div>
    </div>
  }
</Example>

```html
<!-- [!code classes:grow-0] -->
<div class="flex ...">
  <div class="size-14 grow ...">01</div>
  <div class="size-14 grow-0 ...">02</div>
  <div class="size-14 grow ...">03</div>
</div>
```

</Figure>

### Using a custom value

<UsingACustomValue utility="grow" name="flex grow factor" value="25vw" />

### Responsive design

<ResponsiveDesign property="flex-grow" defaultClass="grow" featuredClass="grow-0" />