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

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

export const title = "max-height";
export const description = "Utilities for setting the maximum height of an element.";

<ApiTable
  rows={[
    ["max-h-<number>", "max-height: calc(var(--spacing) * <number>);"],
    ["max-h-<fraction>", "max-height: calc(<fraction> * 100%);"],
    ["max-h-none", "max-height: none;"],
    ["max-h-px", "max-height: 1px;"],
    ["max-h-full", "max-height: 100%;"],
    ["max-h-screen", "max-height: 100vh;"],
    ["max-h-dvh", "max-height: 100dvh;"],
    ["max-h-dvw", "max-height: 100dvw;"],
    ["max-h-lvh", "max-height: 100lvh;"],
    ["max-h-lvw", "max-height: 100lvw;"],
    ["max-h-svh", "max-height: 100svh;"],
    ["max-h-svw", "max-height: 100svw;"],
    ["max-h-min", "max-height: min-content;"],
    ["max-h-max", "max-height: max-content;"],
    ["max-h-fit", "max-height: fit-content;"],
    ["max-h-lh", "max-height: 1lh;"],
    ["max-h-(<custom-property>)", "max-height: var(<custom-property>);"],
    ["max-h-[<value>]", "max-height: <value>;"],
  ]}
/>

## Examples

### Basic example

Use `max-h-<number>` utilities like `max-h-24` and `max-h-64` to set an element to a fixed maximum height based on the spacing scale:

<Figure>

<Example>
  {
    <div className="flex h-96 items-end justify-center space-x-4 text-center font-mono text-xs font-bold text-white">
      <div className="relative grid h-full w-8 items-end rounded-lg">
        <Stripes border className="absolute inset-0 h-full rounded-lg" />
        <div className="relative h-full max-h-80 w-full rounded-lg bg-blue-500">
          <div className="absolute bottom-6 w-8 -rotate-90 text-nowrap">max-h-80</div>
        </div>
      </div>
      <div className="relative grid h-full w-8 items-end rounded-lg">
        <Stripes border className="absolute inset-0 h-full rounded-lg" />
        <div className="relative h-full max-h-64 w-full rounded-lg bg-blue-500">
          <div className="absolute bottom-6 w-8 -rotate-90 text-nowrap">max-h-64</div>
        </div>
      </div>
      <div className="relative grid h-full w-8 items-end rounded-lg">
        <Stripes border className="absolute inset-0 h-full rounded-lg" />
        <div className="relative h-full max-h-48 w-full rounded-lg bg-blue-500">
          <div className="absolute bottom-6 w-8 -rotate-90 text-nowrap">max-h-48</div>
        </div>
      </div>
      <div className="relative grid h-full w-8 items-end rounded-lg">
        <Stripes border className="absolute inset-0 h-full rounded-lg" />
        <div className="relative h-full max-h-40 w-full rounded-lg bg-blue-500">
          <div className="absolute bottom-6 w-8 -rotate-90 text-nowrap">max-h-40</div>
        </div>
      </div>
      <div className="relative grid h-full w-8 items-end rounded-lg">
        <Stripes border className="absolute inset-0 h-full rounded-lg" />
        <div className="relative h-full max-h-32 w-full rounded-lg bg-blue-500">
          <div className="absolute bottom-6 w-8 -rotate-90 text-nowrap">max-h-32</div>
        </div>
      </div>
      <div className="relative grid h-full w-8 items-end rounded-lg">
        <Stripes border className="absolute inset-0 h-full rounded-lg" />
        <div className="relative h-full max-h-24 w-full rounded-lg bg-blue-500">
          <div className="absolute bottom-6 w-8 -rotate-90 text-nowrap">max-h-24</div>
        </div>
      </div>
    </div>
  }
</Example>

```html
<!-- [!code classes:max-h-80,max-h-64,max-h-48,max-h-40,max-h-32,max-h-24,max-h-full] -->
<div class="h-96 ...">
  <div class="h-full max-h-80 ...">max-h-80</div>
  <div class="h-full max-h-64 ...">max-h-64</div>
  <div class="h-full max-h-48 ...">max-h-48</div>
  <div class="h-full max-h-40 ...">max-h-40</div>
  <div class="h-full max-h-32 ...">max-h-32</div>
  <div class="h-full max-h-24 ...">max-h-24</div>
</div>
```

</Figure>

### Using a percentage

Use `max-h-full` or `max-h-<fraction>` utilities like `max-h-1/2` and `max-h-2/5` to give an element a percentage-based maximum height:

<Figure>

<Example>
  {
    <div className="flex h-96 items-end justify-center space-x-4 text-center font-mono text-xs font-bold text-white">
      <div className="relative grid h-full w-8 items-end rounded-lg">
        <Stripes border className="absolute inset-0 h-full rounded-lg" />
        <div className="relative h-full max-h-9/10 w-full rounded-lg bg-blue-500">
          <div className="absolute bottom-6 w-8 -rotate-90 text-nowrap">max-h-9/10</div>
        </div>
      </div>
      <div className="relative grid h-full w-8 items-end rounded-lg">
        <Stripes border className="absolute inset-0 h-full rounded-lg" />
        <div className="relative h-full max-h-3/4 w-full rounded-lg bg-blue-500">
          <div className="absolute bottom-6 w-8 -rotate-90 text-nowrap">max-h-3/4</div>
        </div>
      </div>
      <div className="relative grid h-full w-8 items-end rounded-lg">
        <Stripes border className="absolute inset-0 h-full rounded-lg" />
        <div className="relative h-full max-h-1/2 w-full rounded-lg bg-blue-500">
          <div className="absolute bottom-6 w-8 -rotate-90 text-nowrap">max-h-1/2</div>
        </div>
      </div>
      <div className="relative grid h-full w-8 items-end rounded-lg">
        <Stripes border className="absolute inset-0 h-full rounded-lg" />
        <div className="relative h-full max-h-1/4 w-full rounded-lg bg-blue-500">
          <div className="absolute bottom-6 w-8 -rotate-90 text-nowrap">max-h-1/4</div>
        </div>
      </div>
      <div className="relative grid h-full w-8 items-end rounded-lg">
        <Stripes border className="absolute inset-0 h-full rounded-lg" />
        <div className="relative h-full max-h-full w-full rounded-lg bg-blue-500">
          <div className="absolute bottom-6 w-8 -rotate-90 text-nowrap">max-h-full</div>
        </div>
      </div>
    </div>
  }
</Example>

```html
<!-- [!code classes:max-h-9/10,max-h-3/4,max-h-1/2,max-h-1/4,max-h-full] -->
<div class="h-96 ...">
  <div class="h-full max-h-9/10 ...">max-h-9/10</div>
  <div class="h-full max-h-3/4 ...">max-h-3/4</div>
  <div class="h-full max-h-1/2 ...">max-h-1/2</div>
  <div class="h-full max-h-1/4 ...">max-h-1/4</div>
  <div class="h-full max-h-full ...">max-h-full</div>
</div>
```

</Figure>

### Using a custom value

<UsingACustomValue utility="max-h" value="220px" name="maximum height" variable="max-height" />

### Responsive design

<ResponsiveDesign property="max-height" defaultClass="h-48 max-h-full" featuredClass="max-h-screen" />

## Customizing your theme

<CustomizingYourSpacingScale utility="max-h" />