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

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

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

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

Valid example

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

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

Learn more:

MDN Reference

MDN Web Docs: max-height

→

W3C Reference

CSS Box Sizing Module Level 3

→