Max-Height Property
Last updated: 2026-09-13
max-height Max-Height Property
The max-height property sets the maximum height of an element, preventing it from growing too tall and breaking the layout. Its default value, none, means there is no upper limit. It is often combined with overflow:auto so content taller than the limit shows a scrollbar, a common pattern for fixed-height scrollable regions.
| Category | |
|---|---|
| Initial Value | none |
| Inherited | No |
| Applies To | non-replaced |
| Animation Type | length |
| CSS Version | CSS2 |
| Status | Standard |
📝 Syntax
max-height: none | <length> | <percentage> | min-content | max-content | fit-content;⚙️ Values
| Value | Type | Description |
|---|---|---|
none | Keyword | No maximum height. |
<length> | Type | A fixed maximum height. |
▶ Example
Edit the code below and see the live result in the playground:
🌐 Browser Support
| Browser |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| max-height | ✓ v1 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| Supported in all major browsers | |||||
Tip： max-height needs to be paired with overflow; otherwise content will overflow the container.
❓ FAQ
QWhat happens when max-height and height are both set?
AThe actual height is the smaller of the two. With height:100px and max-height:80px, the element renders at 80px; with height:100px and max-height:150px, it renders at 100px. If the content is shorter than the set height, the element uses the content height. To both cap the height and handle overflow, you also need the overflow property, or the excess will spill out visibly.
QHow do I create a fixed-height scrollable region?
AGive the container a max-height plus overflow-y:auto, for example .list { max-height:300px; overflow-y:auto; }. When content is under 300px no scrollbar shows; once it exceeds the limit a vertical scrollbar appears. This is the standard pattern for chat logs, notification lists, and similar panels, and max-height is better than height here because short content leaves no empty space while long content still scrolls.
QHow do I show an ellipsis when text overflows?
AFor a single line, use white-space:nowrap combined with overflow:hidden and text-overflow:ellipsis. For multiple lines, use -webkit-line-clamp:2 together with the -webkit-box family of properties plus overflow:hidden, which depends on the -webkit- prefix. In both cases the overflowing text is clipped and replaced with an ellipsis, and the hidden remainder cannot be scrolled into view, so reserve a title attribute for the full text.
QCan max-height be set to 0?
AYes. max-height:0 collapses the element's height to zero and is commonly used for collapse and expand animations: start with max-height:0 plus overflow:hidden to hide, then transition to a large enough value to expand. It is the classic CSS height-animation hack; these days the same effect is better achieved by transitioning grid-template-rows between 0fr and 1fr, which avoids the arbitrary max-height value entirely.
🏷️ Related Properties
💡 Related Cases
📚 Related Tutorials
