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

# Max Width

> Control maximum width with size, fraction, and keyword max-width utilities.

export const MaxWidthScreenDemo = () => {
  return <div className="not-prose sk-size-keyword-shell">
      <div className="tw-demo">
        <span className="tw-label">maximum-width-screen</span>
        <div className="tw-demo-stripes sk-size-keyword-frame">
          <div className="sk-size-keyword-parent sk-size-keyword-parent--scroll">
            <div className="sk-demo-max-w-screen sk-size-keyword-bar sk-size-keyword-wide-canvas" style={{
    width: "100%"
  }}>
              maximum-width-screen
            </div>
          </div>
        </div>
      </div>
    </div>;
};

export const MaxWidthFullDemo = () => {
  return <div className="not-prose sk-size-keyword-shell">
      <div className="tw-demo">
        <span className="tw-label">maximum-width-full</span>
        <div className="tw-demo-stripes sk-size-keyword-frame">
          <div className="sk-size-keyword-parent">
            <div className="sk-size-keyword-bar" style={{
    width: "100%",
    maxWidth: "100%"
  }}>maximum-width-full</div>
          </div>
        </div>
      </div>
    </div>;
};

export const MaxWidthAutoDemo = () => {
  return <div className="not-prose sk-size-keyword-shell">
      <div className="tw-demo">
        <span className="tw-label">maximum-width-auto</span>
        <div className="tw-demo-stripes sk-size-keyword-frame">
          <div className="sk-size-keyword-parent sk-size-keyword-parent--scroll">
            <div className="sk-size-keyword-bar sk-size-keyword-wide-canvas" style={{
    maxWidth: "none"
  }}>
              maximum-width-auto
            </div>
          </div>
        </div>
      </div>
    </div>;
};

export const MaxWidthFractionalDemo = () => {
  const shell = {
    width: "100%",
    borderRadius: "0.5rem",
    padding: "0.75rem",
    background: "rgba(148, 163, 184, 0.25)",
    border: "1px dashed rgba(100, 116, 139, 0.45)"
  };
  const capped = {
    maxWidth: "50%",
    marginLeft: "auto",
    marginRight: "auto",
    borderRadius: "0.5rem",
    padding: "0.65rem 0.75rem",
    fontSize: "0.75rem",
    fontWeight: 700,
    color: "#ffffff",
    textAlign: "center",
    background: "#4f46e5",
    boxShadow: "0 4px 12px rgba(15, 23, 42, 0.15)"
  };
  return <div className="not-prose my-6">
      <div className="tw-demo">
        <span className="tw-label">.maximum-width-1-2 centers inside a full-width rail</span>
        <div style={shell}>
          <div style={capped}>maximum-width-1-2 · capped at half the parent</div>
        </div>
      </div>
    </div>;
};

export const MaxWidthDemo = () => {
  const items = [{
    cls: "maximum-width-xs",
    rem: 20,
    meta: "20rem / 320px"
  }, {
    cls: "maximum-width-lg",
    rem: 32,
    meta: "32rem / 512px"
  }, {
    cls: "maximum-width-3xl",
    rem: 48,
    meta: "48rem / 768px"
  }, {
    cls: "maximum-width-full",
    rem: 80,
    meta: "100%"
  }];
  return <div className="not-prose my-6">
      <div className="tw-demo space-y-3">
        {items.map(w => <div key={w.cls} className="flex items-center gap-3">
            <span style={{
    width: "5rem",
    textAlign: "right",
    fontFamily: "monospace",
    fontSize: "0.7rem",
    color: "var(--demo-fg-subtle)",
    flexShrink: 0
  }}>{w.cls}</span>
            <div style={{
    width: "100%",
    background: "var(--demo-panel)",
    border: "1px solid var(--demo-panel-border)",
    borderRadius: "0.5rem",
    padding: "0.35rem"
  }}>
              <div style={{
    maxWidth: w.cls === "maximum-width-full" ? "100%" : `${w.rem / 80 * 100}%`,
    width: "100%"
  }} className="rounded-md bg-indigo-500 p-1.5 text-center text-xs font-bold text-white shadow-lg">
                {w.meta}
              </div>
            </div>
          </div>)}
      </div>
    </div>;
};

## Overview

Max-width utilities cap width with the same suffix families used by width and min-width.

| Pattern                    | Supported values                                                                     |
| -------------------------- | ------------------------------------------------------------------------------------ |
| `maximum-width-<size>`     | `3xs`, `2xs`, `xs`, `sm`, `md`, `lg`, `xl`, `2xl`, `3xl`, `4xl`, `5xl`, `6xl`, `7xl` |
| `maximum-width-<fraction>` | `1-2`, `1-3`, `2-3`, `1-4`, `3-4`                                                    |
| `maximum-width-<value>`    | `px`, `auto`, `full`, `screen`                                                       |

## Examples

### Using the size scale

Use the t-shirt scale when content should stop growing after it reaches a predictable readable width.

<MaxWidthDemo />

```html theme={null}
<div class="elementor-element width-full rounded-lg padding-3 background-gray-light">
  <div class="width-full maximum-width-xl padding-3 background-primary text-white rounded text-center text-sm font-bold">
    maximum-width-xl
  </div>
</div>
```

| Pattern                | Supported classes                                                                                                                                                                                                                                                          | What it controls                        |
| ---------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------- |
| `maximum-width-<size>` | `maximum-width-3xs`, `maximum-width-2xs`, `maximum-width-xs`, `maximum-width-sm`, `maximum-width-md`, `maximum-width-lg`, `maximum-width-xl`, `maximum-width-2xl`, `maximum-width-3xl`, `maximum-width-4xl`, `maximum-width-5xl`, `maximum-width-6xl`, `maximum-width-7xl` | Maximum widths based on the size ladder |

### Using a percentage

Use fractional max-width utilities when a block should stay fluid but stop growing past a fixed percentage of its parent.

<MaxWidthFractionalDemo />

```html theme={null}
<div class="elementor-element width-full rounded-lg padding-3 background-gray-light">
  <div class="width-full maximum-width-1-2 margin-horizontal-auto padding-3 background-primary text-white rounded text-center text-sm font-bold">
    maximum-width-1-2
  </div>
</div>
```

| Pattern                    | Supported classes                                                                                       | What it controls                            |
| -------------------------- | ------------------------------------------------------------------------------------------------------- | ------------------------------------------- |
| `maximum-width-<fraction>` | `maximum-width-1-2`, `maximum-width-1-3`, `maximum-width-2-3`, `maximum-width-1-4`, `maximum-width-3-4` | Maximum width as a percentage of the parent |

### Keeping content inside the parent

Use `maximum-width-full` when a child should never exceed the width of its parent container.

<MaxWidthFullDemo />

```html theme={null}
<div class="elementor-element rounded-lg padding-3 background-gray-light">
  <div class="width-full maximum-width-full padding-3 background-success text-white rounded text-center text-sm font-bold">
    maximum-width-full
  </div>
</div>
```

| Pattern              | Supported classes    | What it controls                    |
| -------------------- | -------------------- | ----------------------------------- |
| `maximum-width-full` | `maximum-width-full` | Caps width at the full parent width |

### Matching the viewport cap

Use `maximum-width-screen` when an element can grow wide, but its cap should still align to the viewport instead of the document container.

<MaxWidthScreenDemo />

```html theme={null}
<div class="elementor-element overflow-hidden rounded-lg">
  <div class="width-full maximum-width-screen padding-3 background-primary text-white text-center text-sm font-bold">
    maximum-width-screen
  </div>
</div>
```

| Pattern                | Supported classes      | What it controls                 |
| ---------------------- | ---------------------- | -------------------------------- |
| `maximum-width-screen` | `maximum-width-screen` | Caps width at the viewport width |

### Removing a width cap

Use `maximum-width-auto` when you need to remove a previous max-width limit and let content grow naturally again.

<MaxWidthAutoDemo />

```html theme={null}
<div class="elementor-element overflow-auto rounded-lg padding-3 background-gray-light">
  <div class="maximum-width-auto minimum-width-xl padding-3 background-secondary text-black rounded text-center text-sm font-bold">
    maximum-width-auto
  </div>
</div>
```

| Pattern              | Supported classes    | What it controls                           |
| -------------------- | -------------------- | ------------------------------------------ |
| `maximum-width-auto` | `maximum-width-auto` | Removes a previously applied max-width cap |

## Best Practices

* Use `maximum-width-<size>` for readable content rails and fixed shells that should stop expanding.
* Use `maximum-width-<fraction>` when a block should stay fluid inside a parent layout.
* Use `maximum-width-full` for children that must not overflow their parent.
* Use `maximum-width-auto` when you intentionally need to remove a previous width cap.

## Related Utilities

<CardGroup cols={2}>
  <Card title="Width" icon="arrows-left-right" href="/sizing/width">
    Pair width and max-width for responsive layouts
  </Card>

  <Card title="Min Width" icon="arrow-left-to-line" href="/sizing/min-width">
    Container-scale and keyword minimum widths
  </Card>
</CardGroup>