Tailwind CSS - Max Height

Tailwind CSS - Max-Height

The max-height utility in Tailwind CSS allows you to constrain the maximum height of an element. This is essential for creating robust and responsive layouts, preventing content from overflowing and breaking your design, especially when dealing with dynamic content.

Understanding Max-Height Utilities

Tailwind provides a set of max-h-{value} classes to apply the max-height CSS property. These classes map to a predefined spacing and sizing scale, but can also be used with arbitrary values for full flexibility.

Class	CSS Properties
max-h-0	max-height: 0px;
max-h-px	max-height: 1px;
max-h-…	Corresponds to the theme.spacing scale (e.g., max-h-4 -> max-height: 1rem;)
max-h-none	max-height: none;
max-h-full	max-height: 100%;
max-h-screen	max-height: 100vh;
max-h-svh	max-height: 100svh; /* Smallest viewport height */
max-h-lvh	max-height: 100lvh; /* Largest viewport height */
max-h-dvh	max-height: 100dvh; /* Dynamic viewport height */
max-h-min	max-height: min-content;
max-h-max	max-height: max-content;
max-h-fit	max-height: fit-content;

Core Concepts

• Fixed Max-Height: Use max-h-{number} (e.g., max-h-64) to set a maximum height based on Tailwind’s default spacing scale.
• Percentage-Based Max-Height: Use max-h-full to limit an element’s height to 100% of its parent’s height. This requires the parent element to have a defined height.
• Viewport-Based Max-Height: Use max-h-screen to limit the height to the viewport’s height. The modern svh, lvh, and dvh units offer more precise control on mobile devices where browser UI can appear and disappear.
• Content-Based Max-Height: max-h-min, max-h-max, and max-h-fit provide powerful ways to size elements based on their intrinsic content dimensions.
• Removing Constraints: Use max-h-none to remove any previously applied max-height constraint, which is especially useful in responsive designs.

Practical Examples

Example 1: Creating a Scrollable Card Body

A common use case is a card component where the content might vary in length. By setting a max-h on the content area and adding overflow-y-auto, you can ensure the card’s total height remains consistent.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Scrollable Card Example</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-slate-100 flex items-center justify-center min-h-screen p-4">

  <div class="max-w-sm w-full rounded-lg bg-white shadow-lg overflow-hidden">
    <img class="w-full h-48 object-cover" src="https://via.placeholder.com/400x200" alt="Card Image">
    <div class="p-6">
      <h3 class="font-bold text-xl mb-2">Card Title</h3>
      <!-- Here we constrain the height and enable scrolling if content overflows -->
      <div class="max-h-32 overflow-y-auto text-gray-700 text-base">
        <p>This is a long description for the card content. When the text exceeds the maximum height of `8rem` (32 * 0.25rem), a vertical scrollbar will appear. This technique is perfect for user-generated content, comments, or product descriptions to maintain a consistent UI layout regardless of the content length.</p>
        <p class="mt-4">More content can be added here, and it will still be contained within the scrollable area.</p>
      </div>
    </div>
  </div>

</body>
</html>

Responsive and Conditional Max-Height

You can apply max-height utilities conditionally by prefixing them with responsive breakpoints (like md:max-h-96) or state variants (like hover:max-h-full). This is powerful for creating dynamic and adaptive interfaces.

Example 2: Expandable Content on Hover

In this example, a truncated text block expands to its full height when the user hovers over it. We use max-h-16 for the initial state and hover:max-h-screen to allow it to expand fully.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Expandable Content Example</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-100 flex items-center justify-center min-h-screen p-4">

  <div class="max-w-md w-full bg-white p-6 rounded-lg shadow-md">
    <h3 class="font-bold text-lg mb-4">Product Details</h3>
    <!-- The transition-all and ease-in-out classes create a smooth animation -->
    <div class="max-h-16 overflow-hidden hover:max-h-screen transition-all duration-500 ease-in-out">
      <p class="text-gray-600">
        This is a detailed product description that is initially truncated to save space. By applying `max-h-16` and `overflow-hidden`, we only show the first few lines. When a user hovers over this container, the `hover:max-h-screen` class activates, expanding the container to reveal the full content. The `transition-all` class ensures this change happens smoothly. This is a great UX pattern for 'Read More' sections without using any JavaScript.
      </p>
    </div>
  </div>

</body>
</html>

Best Practices & Pro-Tips

• Arbitrary Values: If the default scale doesn’t fit your needs, use square bracket notation for a one-off value, like max-h-[150px] or max-h-[50vh].
• Combining with Overflow: max-h is almost always paired with an overflow utility (e.g., overflow-y-auto or overflow-hidden) to control what happens to the content that exceeds the maximum height.
• Customization: For project-wide consistency, you can extend the maxHeight scale in your tailwind.config.js file.
• Performance: Animating max-height is more performant than animating height from 0 to auto. The transition utility pairs nicely with conditional max-height classes.