Tailwind CSS 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.

1<div class="h-96">
2	<div class="max-h-80">max-h-80</div>
3	<div class="max-h-40">max-h-80</div>
4	<div class="max-h-24">max-h-24</div>
5</div>

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.

1<div class="h-96">
2	<div class="max-h-full"></div>
3	<div class="max-h-screen"></div>
4</div>

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.

1<div class="max-h-64 md:max-h-48">
2	This div has a maximum height of 64 pixels by default, and 48 pixels starting
3	from the medium breakpoint.
4</div>

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.

1<div class="max-h-[320px]">320px max height</div>
2<div class="max-h-[75vh]">75% of viewport height</div>
3<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:

1// tailwind.config.js
2module.exports = {
3	theme: {
4		extend: {
5			maxHeight: {
6				section: "28rem",
7				modal: "80vh",
8				"half-screen": "50vh",
9			},
10		},
11	},
12};

1<div class="max-h-section overflow-auto bg-yellow-500...">
2	Custom height for a content block
3</div>

This is ideal for design systems where spacing and layout need consistency.

Real UI Component Examples

📨 Scrollable Notification Panel

1<div class="max-h-96 overflow-y-auto bg-white shadow rounded p-4">
2	<h2 class="text-lg font-bold mb-3">Notifications</h2>
3	<ul>
4		<li class="mb-2">New message from Alex</li>
5		<li class="mb-2">Server restarted</li>
6		<!-- Repeat for effect -->
7	</ul>
8</div>

📄 Modal with Content Cap

1<div
2	class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center"
3>
4	<div
5		class="bg-white p-6 rounded-lg max-h-[80vh] overflow-y-auto w-full max-w-md"
6	>
7		<h3 class="text-xl font-semibold mb-4">Modal Title</h3>
8		<p class="mb-2">Long content inside modal body...</p>
9		<!-- Content continues -->
10	</div>
11</div>

Best practices

• Use overflow-y-auto with max-height so extra content scrolls instead of breaking layouts.

• Prefer relative units (%, screen) when sizing flexible components.

• For transitions, pair max-h-* with overflow-hidden and transition-all to create smooth expand/collapse effects.

Tailwind Max Height Classes

✨ What's Next?

Now that you’ve mastered Tailwind Max Height, try experimenting with:

• Tailwind min height

Windframe Tailwind blocks