HTML Guides for max-height

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>