> ## Documentation Index
> Fetch the complete documentation index at: https://skelementorcss.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Flex Grow

> Use the bundled `.flex-grow` utility to let selected items absorb remaining space.

export const FlexGrowSingleDemo = () => {
  const blockStyle = bg => ({
    background: bg,
    color: "#ffffff",
    borderRadius: "0.75rem",
    padding: "0.9rem 1rem",
    fontSize: "0.875rem",
    fontWeight: 700,
    textAlign: "center",
    boxShadow: "0 6px 14px rgba(15, 23, 42, 0.18)"
  });
  return <div className="not-prose my-6">
      <div className="tw-demo">
        <span className="tw-label">.flex-grow</span>
        <div className="tw-demo-card">
          <div style={{
    display: "flex",
    gap: "1rem"
  }}>
            <div style={{
    ...blockStyle("#334155"),
    width: "7rem"
  }}>Fixed</div>
            <div style={{
    ...blockStyle("#2563eb"),
    flexGrow: 1
  }}>Grows</div>
            <div style={{
    ...blockStyle("#0f766e"),
    width: "7rem"
  }}>Fixed</div>
          </div>
        </div>
      </div>
    </div>;
};

export const FlexGrowDoubleDemo = () => {
  const blockStyle = bg => ({
    background: bg,
    color: "#ffffff",
    borderRadius: "0.75rem",
    padding: "0.9rem 1rem",
    fontSize: "0.875rem",
    fontWeight: 700,
    textAlign: "center",
    boxShadow: "0 6px 14px rgba(15, 23, 42, 0.18)"
  });
  return <div className="not-prose my-6">
      <div className="tw-demo">
        <span className="tw-label">.flex-grow + .flex-grow</span>
        <div className="tw-demo-card">
          <div style={{
    display: "flex",
    gap: "1rem"
  }}>
            <div style={{
    ...blockStyle("#7c3aed"),
    flexGrow: 1
  }}>Main</div>
            <div style={{
    ...blockStyle("#db2777"),
    flexGrow: 1
  }}>Aside</div>
          </div>
        </div>
      </div>
    </div>;
};

## Overview

`.flex-grow` lets an item absorb leftover space in the flex container. Apply it to the item that should expand while its siblings stay at their natural or fixed widths.

| Class        | CSS             |
| ------------ | --------------- |
| `.flex-grow` | `flex-grow: 1;` |

## Single Grow Item

When only one item has `.flex-grow`, it absorbs all remaining space. This pattern works well for sidebar-plus-content layouts.

<FlexGrowSingleDemo />

```html theme={null}
<div class="elementor-element flex gap-4">
  <aside class="card padding-4" style="width: 12rem;">
    Sidebar
  </aside>
  <main class="flex-grow card padding-4">
    Content grows to fill the row.
  </main>
</div>
```

## Multiple Grow Items

When two or more items share `.flex-grow`, they split the leftover space equally. This creates even-width columns without explicit width classes.

<FlexGrowDoubleDemo />

```html theme={null}
<div class="elementor-element flex gap-4">
  <div class="flex-grow card padding-4">
    Main
  </div>
  <div class="flex-grow card padding-4">
    Aside
  </div>
</div>
```

## Best Practices

* Add `.flex-grow` only to the item that should absorb the leftover space.
* Pair it with fixed-width siblings when you want a stable rail + fluid content pattern.
* Combine with `.flex-shrink` decisions when dense layouts need controlled compression.

## Related Utilities

<CardGroup cols={2}>
  <Card title="Flex Basis" href="/flexbox/flex-basis">
    Set starting main-axis size before grow runs
  </Card>

  <Card title="Flex Shrink" href="/flexbox/flex-shrink">
    Control how items contract in tight spaces
  </Card>
</CardGroup>