Tailwind CSS Max-Height
Tailwind max-height utility class allows you to control the maximum height of elements. To set the Tailwind maximum height of an element, you can use the max-h-{size} class
Tailwind Max Height
Tailwind max-height
limits how tall an element can grow. The element can still shrink if the content is smaller, but it won’t stretch past the maximum you set. This is convenient for things like modals, chat windows, dropdowns, or any scrollable box.
Syntax in Tailwind
Tailwind gives you a set of utilities for common max-height
values such as
-
max-h-{value}
: This sets the maximum height to a specific value in pixels. -
max-h-screen
: This sets the maximum height to the full height of the viewport. -
max-h-full
: This sets the maximum height to 100% of the parent container. -
max-h-0
: This sets the maximum height to 0, effectively hiding the element.
Each class is max-h-{value}
. Values come from Tailwind’s spacing scale plus special keywords like screen (full viewport height).
Here’s what that looks like in practice.
<div class="h-96"> <div class="max-h-80">max-h-80</div> <div class="max-h-40">max-h-80</div> <div class="max-h-24">max-h-24</div></div>
Preview
Fixed Limit
Percentage Limit
Tailwind CSS also provides utility classes for setting maximum height as a percentage of the parent container's height. You can use the max-h-full
or max-h-screen
class to achieve this.
<div class="h-96"> <div class="max-h-full"></div> <div class="max-h-screen"></div></div>
Preview
Responsive Tailwind Max Height
To use responsive max-height
classes, you can append the breakpoint prefix to the max-height
classes. For example, md:max-h-48
sets the maximum height to 48 pixels starting from the medium breakpoint and above.
<div class="max-h-64 md:max-h-48"> This div has a maximum height of 64 pixels by default, and 48 pixels starting from the medium breakpoint.</div>
Preview
This div has a maximum height of 64 pixels by default, and 48 pixels starting from the medium breakpoint.
In the above example, the max-h-64
class is applied by default, setting the tailwind max height to 64 pixels. However, starting from the medium breakpoint and above, the md:max-h-48
class is applied, changing the tailwind max height to 48 pixels.
Arbitrary Value Usage
The arbitrary values gives you sizes that are not in the default scame to use to achieve precise pixel or fluid layout.
<div class="max-h-[320px]">320px max height</div><div class="max-h-[75vh]">75% of viewport height</div><div class="max-h-[clamp(200px,50vh,600px)]">Responsive cap</div>
Great for matching Figma specs or building components that resize based on the viewport.
Customization in tailwind.config.js
Extend the theme if you want project-specific max-height
values:
// tailwind.config.jsmodule.exports = { theme: { extend: { maxHeight: { section: "28rem", modal: "80vh", "half-screen": "50vh", }, }, },};
<div class="max-h-section overflow-auto bg-yellow-500..."> Custom height for a content block</div>
Preview
Custom height for a content block
This is ideal for design systems where spacing and layout need consistency.
Real UI Component Examples
📨 Scrollable Notification Panel
<div class="max-h-96 overflow-y-auto bg-white shadow rounded p-4"> <h2 class="text-lg font-bold mb-3">Notifications</h2> <ul> <li class="mb-2">New message from Alex</li> <li class="mb-2">Server restarted</li> <!-- Repeat for effect --> </ul></div>
Preview
Notifications
New message from Alex
Server restarted
📄 Modal with Content Cap
<div class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center"> <div class="bg-white p-6 rounded-lg max-h-[80vh] overflow-y-auto w-full max-w-md" > <h3 class="text-xl font-semibold mb-4">Modal Title</h3> <p class="mb-2">Long content inside modal body...</p> <!-- Content continues --> </div></div>
Preview
Modal Title
Long content inside modal body...
Best practices
-
Use
overflow-y-auto
withmax-height
so extra content scrolls instead of breaking layouts. -
Prefer relative units (%, screen) when sizing flexible components.
-
For transitions, pair
max-h-*
withoverflow-hidden
andtransition-all
to create smooth expand/collapse effects.
Tailwind Max Height Classes
Class | Properties |
---|---|
max-h-0 | max-height: 0px; |
max-h-0.5 | max-height: 0.125rem; |
max-h-1 | max-height: 0.25rem; |
max-h-1.5 | max-height: 0.375rem; |
max-h-2 | max-height: 0.5rem; |
max-h-2.5 | max-height: 0.625rem; |
max-h-3 | max-height: 0.75rem; |
max-h-3.5 | max-height: 0.875rem; |
max-h-4 | max-height: 1rem; |
max-h-5 | max-height: 1.25rem; |
max-h-6 | max-height: 1.5rem; |
max-h-7 | max-height: 1.75rem; |
max-h-8 | max-height: 2rem; |
max-h-9 | max-height: 2.25rem; |
max-h-10 | max-height: 2.5rem; |
max-h-11 | max-height: 2.75rem; |
max-h-12 | max-height: 3rem; |
max-h-14 | max-height: 3.5rem; |
max-h-16 | max-height: 4rem; |
max-h-20 | max-height: 5rem; |
max-h-24 | max-height: 6rem; |
max-h-28 | max-height: 7rem; |
max-h-32 | max-height: 8rem; |
max-h-36 | max-height: 9rem; |
max-h-40 | max-height: 10rem; |
max-h-44 | max-height: 11rem; |
max-h-48 | max-height: 12rem; |
max-h-52 | max-height: 13rem; |
max-h-56 | max-height: 14rem; |
max-h-60 | max-height: 15rem; |
max-h-64 | max-height: 16rem; |
max-h-72 | max-height: 18rem; |
max-h-80 | max-height: 20rem; |
max-h-96 | max-height: 24rem; |
max-h-px | max-height: 1px; |
max-h-full | max-height: 100%; |
max-h-screen | max-height: 100vh; |
✨ What's Next?
Now that you’ve mastered Tailwind Max Height, try experimenting with:
Windframe Tailwind blocks
Windframe is an AI visual editor for rapidly building stunning web UIs & websites
Start building stunning web UIs & websites!
