max-height
The maximum height: the element grows with its content only up to this limit.
Syntax
max-height: value;Values
| Parameter | Type | Description |
|---|---|---|
| px | length | A limit in pixels. |
| vh | length | A share of the window height: `80vh`. |
| none | keyword | No limit (the default). |
Examples
A list that scrolls once it is taller than 80 pixels:
<ul style="max-height: 80px; overflow-y: auto; border: 1px solid gray; margin: 0;">
<li>Anna</li><li>Oleg</li><li>Maria</li><li>Ivan</li><li>Sofia</li><li>Pavel</li>
</ul>Notes
Pair max-height with overflow: auto, otherwise the extra content will spill out of the block.
See also
- min-height — The minimum height: the element is at least this tall, but can grow.
- height — The height of an element.
- overflow — What to do with content that does not fit into the element.
Related recipes
In the tutorial
- The box model — What an element consists of in CSS — content, padding, border and margin, sizes, centering and box-sizing.