Box
max-height
max-height sets an upper limit on the height of an element. It fits the content while there is little of it, and never gets taller than the limit when there is more. It is often paired with overflow to make long content scroll.
Syntax
none | <length-percentage [0,∞]> | min-content | max-content | fit-content | fit-content(<length-percentage [0,∞]>)Preview
The quick brown fox jumps over the lazy dog. 素早い茶色の狐がのろまな犬を飛び越える。
Presets
Drag the bottom-right corner to resize
Code
.box {
height: auto;
max-height: 5em;
}Controls
max-height5em
The quick brown fox jumps over the lazy dog. 素早い茶色の狐がのろまな犬を飛び越える。
About
Writing the value
- A length such as
80px: never taller than that. none: no upper limit. This is the initial value.min-content,max-contentandfit-content: in horizontal text, all of these use the content's height as the limit.
What happens to content that does not fit?
The preview on this page adds max-height to a box whose height is left to its content with height: auto. Content taller than the limit overflows the box. The preview box has overflow: auto, so the overflow can be scrolled. Use it for parts such as menus or comment lists that should scroll once they get long.
A percentage such as 50% only works when the parent has a definite height, so this page does not offer it. Dragging the handle at the bottom right of the preview box to make it taller stops at max-height.