max-height
Limits the maximum height of an element. Use maxh40rem to create a scrollable container, or maxh100vh to fit the viewport height.
Class List
Pattern: use maxh{N}px, maxh{N}rem, maxh{N}vh, or keyword classes.
| Class | CSS | Description |
|---|---|---|
maxh200px | max-height: 200px | maximum height 200px |
maxh40rem | max-height: 40rem | maximum height 40rem (400px) |
maxh100vh | max-height: 100vh | fit to viewport height |
maxha | max-height: auto | auto-determined |
maxhn | max-height: none | no limit (default) |
maxhfc | max-height: fit-content | adjust to fit content |
maxhminc | max-height: min-content | minimum content size |
maxhmaxc | max-height: max-content | maximum content size |
Visual Comparison
Compares the results of applying different max-height values to the same content.
100px — maxh100px
Line 1: first line
Line 2: second line
Line 3: third line
Line 4: fourth line
Line 5: fifth line
Line 6: sixth line
Line 7: seventh line
200px — maxh200px
Line 1: first line
Line 2: second line
Line 3: third line
Line 4: fourth line
Line 5: fifth line
Line 6: sixth line
Line 7: seventh line
none (no limit) — maxhn
Line 1: first line
Line 2: second line
Line 3: third line
Line 4: fourth line
Line 5: fifth line
Line 6: sixth line
Line 7: seventh line
Class Details
maxh{N}pxmaxh{N}remmaxh{N}vh
Sets the maximum height with a fixed unit. When content exceeds this value, it is clipped or scrolled depending on the overflow setting.
<!-- Scrollable list -->
<ul class="maxh40rem oya lsn df fdc gap8px">
<li class="p12px bg18181B br4px cFAFAFA">Item 1</li>
<li class="p12px bg18181B br4px cFAFAFA">Item 2</li>
<!-- ... Many items -->
</ul>
<!-- Modal content area -->
<div class="maxh80vh oya p2rem">
<p class="cFAFAFA lh1-7">Long modal content...</p>
</div>
<!-- Image max height limit -->
<img src="photo.jpg" class="maxh40rem w100p ofc" />Common Values
maxh200px oya | 200px limit + vertical scroll |
maxh40rem oya | scrollable content area (400px) |
maxh100vh | fit to viewport height |
maxh80vh oya | viewport 80% limit + scroll (modal) |
maxhnmax-height: none
Removes the max-height limit. This is the default value, used in responsive layouts to remove the limit at specific breakpoints.
<!-- Responsive: Desktop limited, mobile unrestricted -->
<div class="maxh40rem sm-maxhn oya">
<p class="cFAFAFA lh1-7">Content...</p>
</div>maxhamax-height: auto
The browser automatically determines the max-height.
<!-- auto max-height -->
<div class="maxha">
<p class="cFAFAFA lh1-7">Height is determined automatically.</p>
</div>maxhfcmaxhmincmaxhmaxc
Content-based keywords. maxhfc adjusts to fit content, maxhminc uses minimum content size, and maxhmaxc uses maximum content size.
<!-- fit-content -->
<div class="maxhfc bg18181B p2rem br8px">
<p class="cFAFAFA">Height that fits content exactly</p>
</div>
<!-- min-content -->
<div class="maxhminc oh bg18181B p2rem br8px">
<p class="cFAFAFA">Only up to minimum content size</p>
</div>Tips & Notes
Scroll container pattern
Combine maxh40rem oya to create a container that shows a vertical scrollbar when content overflows.
Responsive max-height
Use maxh40rem sm-maxhn to limit height on desktop and remove the limit on mobile.
Overflow setting required
Setting only max-height may leave overflowing content visible. Always use oh (hidden) or oya (auto) together.