# CSS: “max-height”: X is not a “max-height” value.

> Canonical HTML version: https://rocketvalidator.com/html-validation/css-max-height-x-is-not-a-max-height-value
> Attribution: Rocket Validator (https://rocketvalidator.com)
> License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)

`max-height` takes `none`, a length, a percentage or a sizing keyword such as `fit-content`, and the validator rejects anything else, including `auto`.

`auto` is valid for `height` and `min-height`, so it's easy to carry it over to `max-height`. That property has no automatic value. Its initial value is `none`, meaning no limit, and a browser that reads `max-height: auto` drops the declaration as invalid.

That matters when `auto` is meant to undo a limit from another rule, such as a collapsed panel with `max-height: 0` that opens when a class is added, or a fixed cap that a media query should lift. The browser skips the `auto`, the earlier value still applies, and the content remains clipped. Write `none` to remove the limit.

Made-up keywords such as `full` get the same message. Besides `none`, the property accepts lengths like `300px` or `80vh`, percentages of the containing block's height, the keywords `min-content`, `max-content` and `fit-content`, and global keywords such as `inherit` and `initial`.

## Invalid example

```html
<style>
  .panel {
    max-height: 0;
    overflow: hidden;
  }

  .panel.is-open {
    max-height: auto;
  }
</style>
```

## Valid example

```html
<style>
  .panel {
    max-height: 0;
    overflow: hidden;
  }

  .panel.is-open {
    max-height: none;
  }
</style>
```