> ## 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 Height

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

export const MaxHeightScreenDemo = () => {
  return <div className="not-prose sk-size-keyword-shell">
      <div className="tw-demo">
        <span className="tw-label">maximum-height-screen</span>
        <div className="tw-demo-stripes sk-size-keyword-frame">
          <div className="sk-size-keyword-viewport">
            <div className="sk-size-keyword-panel sk-size-keyword-wide-canvas" style={{
    height: "100%",
    maxHeight: "100vh"
  }}>
              <h3 className="sk-size-keyword-panel--title">maximum-height-screen</h3>
              <p className="sk-size-keyword-panel--copy">
                Keeps a tall panel capped to the viewport.
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>;
};

export const MaxHeightFullDemo = () => {
  return <div className="not-prose sk-size-keyword-shell">
      <div className="tw-demo">
        <span className="tw-label">maximum-height-full</span>
        <div className="tw-demo-stripes sk-size-keyword-frame">
          <div className="sk-size-keyword-parent sk-size-keyword-parent--tall">
            <div className="sk-size-keyword-panel" style={{
    height: "100%",
    maxHeight: "100%"
  }}>
              <h3 className="sk-size-keyword-panel--title">maximum-height-full</h3>
              <p className="sk-size-keyword-panel--copy">
                The cap stays aligned to the parent height.
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>;
};

export const MaxHeightAutoDemo = () => {
  return <div className="not-prose sk-size-keyword-shell">
      <div className="tw-demo">
        <span className="tw-label">maximum-height-auto</span>
        <div className="tw-demo-stripes sk-size-keyword-frame">
          <div className="sk-size-keyword-parent sk-size-keyword-parent--tall sk-size-keyword-parent--scroll">
            <div className="sk-size-keyword-panel" style={{
    maxHeight: "none"
  }}>
              <h3 className="sk-size-keyword-panel--title">maximum-height-auto</h3>
              <p className="sk-size-keyword-panel--copy">
                This panel is free to grow because no max-height cap is applied.
              </p>
              <p className="sk-size-keyword-panel--copy">
                Use it when you need to remove a previously inherited height cap.
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>;
};

export const MaxHeightFractionalDemo = () => {
  const parent = {
    height: "11rem",
    width: "100%",
    maxWidth: "18rem",
    marginLeft: "auto",
    marginRight: "auto",
    borderRadius: "0.5rem",
    padding: "0.45rem",
    background: "rgba(148, 163, 184, 0.2)",
    border: "1px solid rgba(100, 116, 139, 0.35)"
  };
  const scrollBody = {
    maxHeight: "50%",
    overflow: "auto",
    borderRadius: "0.4rem",
    padding: "0.5rem 0.6rem",
    fontSize: "0.7rem",
    lineHeight: 1.5,
    background: "#ffffff",
    border: "1px solid rgba(148, 163, 184, 0.5)"
  };
  const filler = ("Scrollable region capped at half the parent. ").repeat(6);
  return <div className="not-prose my-6">
      <div className="tw-demo">
        <span className="tw-label">.maximum-height-1-2 + overflow-auto</span>
        <div style={parent}>
          <div className="sk-demo-fg-on-muted" style={{
    fontSize: "0.65rem",
    fontWeight: 700,
    marginBottom: "0.35rem"
  }}>
            Panel header
          </div>
          <div className="sk-demo-fg-on-light" style={scrollBody}>
            {filler}
          </div>
        </div>
      </div>
    </div>;
};

export const MaxHeightDemo = () => {
  const items = [{
    cls: "maximum-height-3xs",
    px: "16rem",
    over: "hidden",
    meta: "16rem / 256px"
  }, {
    cls: "maximum-height-md",
    px: "28rem",
    over: "auto",
    meta: "28rem / 448px"
  }, {
    cls: "maximum-height-full",
    px: "100%",
    over: "visible",
    meta: "100%"
  }];
  const content = "Andrew Alfred is a distinguished technical advisor with broad knowledge across many fields. His expertise spans artificial intelligence, machine learning, and software architecture. He has contributed to numerous open-source projects and mentored dozens of engineers. His work focuses on building scalable systems that evolve over time.";
  return <div className="not-prose my-6">
      <div className="tw-demo">
        <div className="grid grid-cols-3 gap-4">
          {items.map(h => <div key={h.cls}>
              <span className="tw-label">
                {h.cls} <span style={{
    color: "var(--demo-fg-faint)"
  }}>({h.meta})</span>
              </span>
              <div style={{
    maxHeight: h.px,
    overflow: h.over,
    background: "var(--demo-panel)",
    border: "1px solid var(--demo-panel-border)"
  }} className="rounded-lg p-4">
                <p style={{
    fontSize: "0.8rem",
    lineHeight: 1.65,
    color: "var(--demo-fg-subtle)"
  }}>{content}</p>
              </div>
            </div>)}
        </div>
      </div>
    </div>;
};

## Overview

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

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

## Examples

### Using the size scale

Use the t-shirt scale when a surface should stop growing after it reaches a predictable vertical rhythm.

<MaxHeightDemo />

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

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

### Using a percentage

Use fractional max-height utilities when a child should stay fluid but stop growing beyond a percentage of the parent height.

<MaxHeightFractionalDemo />

```html theme={null}
<div class="elementor-element height-3xs padding-3 background-gray-light rounded-lg flex flex-col">
  <div class="maximum-height-1-2 overflow-auto padding-3 background-white rounded border-1 border-solid border-gray text-black text-sm">
    maximum-height-1-2
  </div>
</div>
```

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

### Keeping content inside the parent

Use `maximum-height-full` when a child should stay inside the full height of a parent container.

<MaxHeightFullDemo />

```html theme={null}
<div class="elementor-element height-3xs rounded-lg padding-3 background-gray-light">
  <div class="height-full maximum-height-full rounded border-1 border-solid border-gray padding-3 background-white text-black text-sm">
    maximum-height-full
  </div>
</div>
```

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

### Matching the viewport cap

Use `maximum-height-screen` when a panel can grow tall but should still stay capped to the viewport height.

<MaxHeightScreenDemo />

```html theme={null}
<div class="elementor-element overflow-hidden rounded-lg">
  <div class="maximum-height-screen rounded border-1 border-solid border-gray padding-3 background-white text-black text-sm">
    maximum-height-screen
  </div>
</div>
```

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

### Removing a height cap

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

<MaxHeightAutoDemo />

```html theme={null}
<div class="elementor-element overflow-auto rounded-lg padding-3 background-gray-light">
  <div class="maximum-height-auto rounded border-1 border-solid border-gray padding-3 background-white text-black text-sm">
    maximum-height-auto
  </div>
</div>
```

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

## Best Practices

* Use `maximum-height-<size>` for panels that should stop growing after a fixed vertical threshold.
* Use `maximum-height-<fraction>` when a child should stay proportional to the parent height.
* Pair `maximum-height-full` or `maximum-height-screen` with overflow utilities when content may need to scroll.
* Use `maximum-height-auto` to remove an inherited height cap instead of stacking conflicting rules.

## Related Utilities

<CardGroup cols={2}>
  <Card title="Height" icon="arrows-up-down" href="/sizing/height">
    Bundled height utilities
  </Card>

  <Card title="Min Height" icon="arrow-down-left-and-arrow-up-right-to-center" href="/sizing/min-height">
    Bundled minimum-height helpers
  </Card>
</CardGroup>