# Max height

> Utilities for setting the maximum height of an element.

Source: https://www.zenplates.co/documentation/utilities/max-height (Utilities › Sizing)

| Class           | Properties           |
| --------------- | -------------------- |
| `.max-h-0`      | `max-height: 0;`     |
| `.max-h-full`   | `max-height: 100%;`  |
| `.max-h-screen` | `max-height: 100vh;` |

## Usage

Use `.max-h-full` or `.max-h-screen` to set the maximum height of an element.

## Variants

By default, no responsive or hover-state variants are generated for max height utilities.

### Responsive

To include responsive variants like `.md:max-h-full`, add `"max-height"` to the `$responsive-variants` variable in your theme's `_variables.scss` file when [recompiling your CSS](https://www.zenplates.co/documentation/customization/using-sass-source-files):

```scss
$responsive-variants: (
  // ...
  "max-height",
);
```

### Hover-state

To include hover-state variants like `.hover:max-h-full`, add `"max-height"` to the `$hover-variants` variable when recompiling your CSS:

```scss
$hover-variants: (
  // ...
  "max-height",
);
```