maxHeight

Max-height, written max-height in CSS, is a style property that sets the maximum height an element is allowed to have. It does not set a fixed height by itself; instead it constrains the element's height to the specified value while allowing smaller content to determine the final height when appropriate. The initial value is none, meaning there is no limit unless specified.

Syntax and values: max-height accepts a length (such as px, em, rem), a percentage, or none. Percentages are relative to the height of the element's containing block. Values must be non-negative; negative values are invalid. The computed value represents the upper bound for the element's height.

Behavior and usage: When the content would exceed the max-height, the way the excess is presented depends on the overflow property. For example, with overflow: auto or overflow: scroll, a scrollbar may appear to reveal overflow content. With overflow: hidden, extra content is clipped. If the content is smaller than the limit, the element uses its natural height up to the max-height.

Common use cases include limiting the height of images, cards, panels, or chat messages to maintain consistent layouts, and creating scrollable regions in a page. In responsive designs, max-height helps adapt to different screen sizes, often using viewport-based values like 50vh.

In modern browsers max-height is well supported and interacts with height, min-height, and layout modules such as flexbox and grid. See also height, min-height, overflow.