Tailwind CSS Max-Height

The max-height property in CSS is used to limit how tall an element can be, ensuring its height does not exceed a specified value. It enhances control over layout design, particularly when dealing with dynamic or responsive content.

Tailwind CSS simplifies this functionality with utilities dedicated to managing the maximum height of elements. These utility classes empower you to implement max-height with precision, while remaining responsive and easily adjustable.

Class	Properties	Example
`max-h-0`	`max-height: 0px;`	`<div className="max-h-0"></div>`
`max-h-px`	`max-height: 1px;`	`<div className="max-h-px"></div>`
`max-h-0.5`	`max-height: 0.125rem;`	`<div className="max-h-0.5"></div>`
`max-h-1`	`max-height: 0.25rem;`	`<div className="max-h-1"></div>`
`max-h-1.5`	`max-height: 0.375rem;`	`<div className="max-h-1.5"></div>`
`max-h-2`	`max-height: 0.5rem;`	`<div className="max-h-2"></div>`
`max-h-2.5`	`max-height: 0.625rem;`	`<div className="max-h-2.5"></div>`
`max-h-3`	`max-height: 0.75rem;`	`<div className="max-h-3"></div>`
`max-h-3.5`	`max-height: 0.875rem;`	`<div className="max-h-3.5"></div>`
`max-h-4`	`max-height: 1rem;`	`<div className="max-h-4"></div>`
`max-h-5`	`max-height: 1.25rem;`	`<div className="max-h-5"></div>`
`max-h-6`	`max-height: 1.5rem;`	`<div className="max-h-6"></div>`
`max-h-7`	`max-height: 1.75rem;`	`<div className="max-h-7"></div>`
`max-h-8`	`max-height: 2rem;`	`<div className="max-h-8"></div>`
`max-h-9`	`max-height: 2.25rem;`	`<div className="max-h-9"></div>`
`max-h-10`	`max-height: 2.5rem;`	`<div className="max-h-10"></div>`
`max-h-11`	`max-height: 2.75rem;`	`<div className="max-h-11"></div>`
`max-h-12`	`max-height: 3rem;`	`<div className="max-h-12"></div>`
`max-h-14`	`max-height: 3.5rem;`	`<div className="max-h-14"></div>`
`max-h-16`	`max-height: 4rem;`	`<div className="max-h-16"></div>`
`max-h-20`	`max-height: 5rem;`	`<div className="max-h-20"></div>`
`max-h-24`	`max-height: 6rem;`	`<div className="max-h-24"></div>`
`max-h-28`	`max-height: 7rem;`	`<div className="max-h-28"></div>`
`max-h-32`	`max-height: 8rem;`	`<div className="max-h-32"></div>`
`max-h-36`	`max-height: 9rem;`	`<div className="max-h-36"></div>`
`max-h-40`	`max-height: 10rem;`	`<div className="max-h-40"></div>`
`max-h-44`	`max-height: 11rem;`	`<div className="max-h-44"></div>`
`max-h-48`	`max-height: 12rem;`	`<div className="max-h-48"></div>`
`max-h-52`	`max-height: 13rem;`	`<div className="max-h-52"></div>`
`max-h-56`	`max-height: 14rem;`	`<div className="max-h-56"></div>`
`max-h-60`	`max-height: 15rem;`	`<div className="max-h-60"></div>`
`max-h-64`	`max-height: 16rem;`	`<div className="max-h-64"></div>`
`max-h-72`	`max-height: 18rem;`	`<div className="max-h-72"></div>`
`max-h-80`	`max-height: 20rem;`	`<div className="max-h-80"></div>`
`max-h-96`	`max-height: 24rem;`	`<div className="max-h-96"></div>`
`max-h-none`	`max-height: none;`	`<div className="max-h-none"></div>`
`max-h-full`	`max-height: 100%;`	`<div className="max-h-full"></div>`
`max-h-screen`	`max-height: 100vh;`	`<div className="max-h-screen"></div>`
`max-h-svh`	`max-height: 100svh;`	`<div className="max-h-svh"></div>`
`max-h-lvh`	`max-height: 100lvh;`	`<div className="max-h-lvh"></div>`
`max-h-dvh`	`max-height: 100dvh;`	`<div className="max-h-dvh"></div>`
`max-h-min`	`max-height: min-content;`	`<div className="max-h-min"></div>`
`max-h-max`	`max-height: max-content;`	`<div className="max-h-max"></div>`
`max-h-fit`	`max-height: fit-content;`	`<div className="max-h-fit"></div>`

Overview of Max-Height

Adding the Max-Height

You can use max-h-* classes to set constraints on elements. Tailwind offers a range of predefined values for this purpose, enabling precise control over the maximum height.

In the below snippet, the container's height is restricted to 10rem (max-h-40):

This is a live editor. Play around with it!

export default function MaxHeightBasic() {
  return (
    <div className="h-screen w-screen bg-gray-100 flex justify-center items-center">
      <div className="max-h-10 bg-blue-500 overflow-scroll text-white p-2"> 
        {/* max-height: 2.5rem applied */}
        <p>This box has a max height of 2 rem.</p>
      </div>
    </div>
  );
}

States and Responsiveness

Tailwind allows conditional max-height adjustments, responsive to interaction or breakpoints. These are particularly useful when styling hover effects or designing layouts for various screen sizes.

Hover and Focus States

You can modify max-height properties dynamically based on hover, focus, or other pseudo-states. This behavior enhances interactivity and user engagement.

Notice how a graceful height transformation is achieved using hover:max-h-* utility.

This is a live editor. Play around with it!

export default function InteractiveStates() {
  return (
    <div className="h-screen w-screen bg-gray-100 flex justify-center items-center">
      <div className="max-h-20 hover:max-h-60 bg-yellow-400 p-4 transition-all duration-300">
        {/* max-height: 5rem by default, 15rem on hover */}
        <p>
          The current max height of the container is not big enough to contain the entire text. Therefore, you will see the text overflow. However, when you hover on the container, the max height will dynamically change to fit the entire content.
        </p>
      </div>
    </div>
  );
}

Breakpoint Modifiers

Breakpoints in Tailwind let you define conditional styles tailored to different screen widths. Adjust max-height dynamically to suit specific devices and ensure responsiveness.

The max-height progressively increases at various breakpoints, such as small (sm), large (lg), and extra-large screens (2xl).

This is a live editor. Play around with it!

export default function ResponsiveBreakpoints() {
  return (
    <div className="h-screen w-screen bg-gray-100 flex justify-center items-center">
      <div className="bg-red-400 overflow-hidden p-4 max-h-24 sm:max-h-32 md:max-h-48 lg:max-h-64 xl:max-h-80 2xl:max-h-screen">
        {/* Scales max-height for different breakpoints */}
        Resize the viewport to observe how the height adapts.
      </div>
    </div>
  );
}

Custom Max-Height

Tailwind enables you to tailor your max-height configurations beyond its predefined utilities. Whether you extend your theme or use inline arbitrary values, custom settings provide unmatched flexibility.

Extending the Theme

You can define custom values in Tailwind’s configuration file. This approach ensures your team has access to unique height limits across the project.

Usage of the custom class:

This is a live editor. Play around with it!

import tailwindConfig from "./tailwind.config.js";
tailwind.config = tailwindConfig;

export default function ExtendedTheme() {
  return (
    <div className="h-screen w-screen bg-gray-100 flex justify-center items-center">
      <div className="max-h-custom bg-green-500 overflow-hidden text-white p-4">
        {/* max-height: 45rem */}
        <p> 
          This container has a custom `max-height` value defined in Tailwind's configuration.
        </p>
      </div>
    </div>
  );
}

The "max-h-custom" class corresponds to the 45rem value added to the configuration.

Using Arbitrary Values

For ultimate control, you can apply specific height limits directly within your class names by using square bracket notation.

This is a live editor. Play around with it!

export default function ArbitraryValues() {
  return (
    <div className="h-screen w-screen bg-gray-100 flex justify-center items-center">
      <div className="max-h-[300px] bg-purple-600 text-white overflow-y-auto p-4">
        {/* max-height: 300px explicitly applied */}
        <p>
          This container has a custom arbitrary value of 300px.
        </p>
      </div>
    </div>
  );
}

With [value], you can enforce unique and specific dimensions not covered by predefined classes.

Real World Examples

Product Grid with Expandable Description

This example shows a grid of product cards with expandable descriptions that use max-height and transition for smooth animation.

This is a live editor. Play around with it!

export default function ProductGrid() {
  const products = [
    {
      id: 1,
      name: "Premium Leather Backpack",
      description: "Handcrafted genuine leather backpack with multiple compartments and laptop sleeve. Perfect for daily commute and travel.",
      price: "$199.99",
      src: "https://images.unsplash.com/photo-1622560480605-d83c853bc5c3",
      alt: "Brown leather backpack"
    },
  ];

  return (
    <div className="grid gap-6 p-8">
      {products.map((product) => (
        <div key={product.id} className="group border rounded-lg overflow-hidden">
          <div className="max-h-48 overflow-hidden">
            <img 
              src={product.src} 
              alt={product.alt}
              className="w-full h-full object-cover"
            />
          </div>
          <div className="p-4">
            <h3 className="font-bold">{product.name}</h3>
            <div className="overflow-hidden transition-all duration-300 group-hover:max-h-40 max-h-0">
              <p className="text-gray-600">{product.description}</p>
            </div>
            <p className="mt-2 font-semibold">{product.price}</p>
          </div>
        </div>
      ))}
    </div>
  );
}

Scrollable News Feed with Fixed Height

This component creates a news feed with a fixed maximum height and scrollable content.

This is a live editor. Play around with it!

export default function NewsFeed() {
  const newsItems = [
    {
      id: 1,
      title: "Breaking Tech News",
      content: "Latest developments in AI technology revolutionize industry standards.",
      timestamp: "2 hours ago",
      src: "https://images.unsplash.com/photo-1518770660439-4636190af475",
      alt: "Tech illustration"
    },
  ];

  return (
    <div className="bg-gray-100 p-6 rounded-xl">
      <h2 className="text-2xl font-bold mb-4">Today's Headlines</h2>
      <div className="max-h-96 overflow-y-auto">
        {newsItems.map((item) => (
          <div key={item.id} className="bg-white mb-4 p-4 rounded-lg shadow">
            <div className="max-h-32 overflow-hidden rounded-lg mb-3">
              <img 
                src={item.src} 
                alt={item.alt}
                className="w-full h-full object-cover"
              />
            </div>
            <h3 className="font-semibold">{item.title}</h3>
            <p className="text-gray-600 mt-2">{item.content}</p>
            <span className="text-sm text-gray-400">{item.timestamp}</span>
          </div>
        ))}
      </div>
    </div>
  );
}

Image Gallery with Dynamic Heights

This gallery component maintains aspect ratios while limiting maximum heights.

This is a live editor. Play around with it!

export default function ImageGallery() {
  const images = [
    {
      id: 1,
      title: "Mountain Landscape",
      src: "https://images.unsplash.com/photo-1506905925346-21bda4d32df4",
      alt: "Mountain peaks at sunset",
      category: "Nature"
    },
  ];

  return (
    <div className="p-8 bg-black h-screen">
      <div className="grid grid-cols-2 md:grid-cols-3 gap-4">
        {images.map((image) => (
          <div key={image.id} className="relative group">
            <div className="max-h-[400px] overflow-hidden rounded-lg">
              <img
                src={image.src}
                alt={image.alt}
                className="w-full h-full object-cover transition-transform duration-300 group-hover:scale-110"
              />
            </div>
            <div className="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/70 p-4">
              <h3 className="text-white font-semibold">{image.title}</h3>
              <span className="text-gray-300 text-sm">{image.category}</span>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

Notification Center with Fixed Height

This component creates a notification center with a scrollable list and fixed maximum height.

This is a live editor. Play around with it!

export default function NotificationCenter() {
  const notifications = [
    {
      id: 1,
      title: "New Message",
      message: "You have received a new message from Sarah.",
      time: "Just now",
      type: "message",
      src: "https://images.unsplash.com/photo-1494790108377-be9c29b29330",
      alt: "Profile picture"
    },
    // ... 5 more notifications
  ];

  return (
    <div className="w-96 bg-white rounded-xl shadow-lg">
      <div className="p-4 border-b">
        <h2 className="font-bold text-lg">Notifications</h2>
      </div>
      <div className="max-h-[70vh] overflow-y-auto">
        {notifications.map((notification) => (
          <div key={notification.id} className="p-4 border-b hover:bg-gray-50">
            <div className="flex items-center">
              <div className="w-10 h-10 rounded-full overflow-hidden">
                <img 
                  src={notification.src} 
                  alt={notification.alt}
                  className="w-full h-full object-cover"
                />
              </div>
              <div className="ml-3 flex-1">
                <h3 className="font-semibold">{notification.title}</h3>
                <p className="text-sm text-gray-600">{notification.message}</p>
                <span className="text-xs text-gray-400">{notification.time}</span>
              </div>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

A news feed layout with fixed-height sidebar navigation and scrollable content area.

This is a live editor. Play around with it!

export default function NewsFeed() {
  const newsItems = [
    {
      id: 1,
      title: "Breaking Technology News",
      content: "Latest developments in AI and machine learning...",
      category: "Technology",
      src: "https://images.unsplash.com/photo-1518770660439-4636190af475",
      alt: "Tech illustration"
    },
    // Add 5 more items here...
  ];

  const categories = [
    "Technology", "Business", "Sports", "Entertainment",
    "Politics", "Science", "Health"
  ];

  return (
    <div className="flex h-screen">
      <nav className="w-64 bg-gray-100 max-h-screen overflow-y-auto">
        <ul className="p-4">
          {categories.map((category) => (
            <li key={category} className="mb-2">
              <a href="#" className="block p-2 hover:bg-gray-200 rounded">
                {category}
              </a>
            </li>
          ))}
        </ul>
      </nav>
      <main className="flex-1 max-h-screen overflow-y-auto p-6">
        {newsItems.map((item) => (
          <article key={item.id} className="mb-8 border-b pb-6">
            <img
              src={item.src}
              alt={item.alt}
              className="w-full h-48 object-cover rounded-lg"
            />
            <h2 className="text-xl font-bold mt-4">{item.title}</h2>
            <p className="text-gray-600 mt-2">{item.content}</p>
          </article>
        ))}
      </main>
    </div>
  );
}

Customization Examples

Dynamic Product Card with Custom Max-Height

This example demonstrates a product card with a custom max-height that adjusts based on viewport size.

This is a live editor. Play around with it!

import tailwindConfig from "./tailwind.config.js";
tailwind.config = tailwindConfig;

// App.js
export default function ProductCard() {
  return (
    <div className="p-4 bg-gray-50">
      <div className="max-h-product-card-lg sm:max-h-product-card-sm lg:max-h-product-card-lg overflow-hidden rounded-xl shadow-lg bg-white">
        <img
          src="https://images.unsplash.com/photo-1523275335684-37898b6baf30"
          alt="Premium Watch"
          className="w-full h-72 object-cover"
        />
        <div className="p-6">
          <h2 className="text-2xl font-bold mb-2">Premium Watch</h2>
          <p className="text-gray-600 mb-4">
            Luxurious timepiece with premium materials and sophisticated design.
          </p>
          <div className="flex justify-between items-center">
            <span className="text-3xl font-bold text-blue-600">$299</span>
            <button className="bg-blue-500 text-white px-6 py-2 rounded-lg">
              Add to Cart
            </button>
          </div>
        </div>
      </div>
    </div>
  )
}

Scrollable Content Panel with Custom Max-Height

This example shows a scrollable content panel with custom max-height for different breakpoints.

This is a live editor. Play around with it!

import tailwindConfig from "./tailwind.config.js";
tailwind.config = tailwindConfig;

// App.js
export default function ScrollablePanel() {
  return (
    <div className="p-6 bg-gray-100">
      <div className="bg-white rounded-2xl shadow-xl p-8">
        <h2 className="text-3xl font-bold mb-6">Latest Updates</h2>
        <div className="max-h-panel-xs md:max-h-panel-md xl:max-h-panel-xl overflow-y-auto">
          {[1, 2, 3, 4, 5].map((item) => (
            <div key={item} className="mb-6 p-4 border-b border-gray-200">
              <div className="flex items-center mb-4">
                <img
                  src={`https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d`}
                  alt="Avatar"
                  className="w-12 h-12 rounded-full mr-4"
                />
                <div>
                  <h3 className="font-semibold">User Update {item}</h3>
                  <p className="text-gray-500 text-sm">2 hours ago</p>
                </div>
              </div>
              <p className="text-gray-700">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do
                eiusmod tempor incididunt ut labore et dolore magna aliqua.
              </p>
            </div>
          ))}
        </div>
      </div>
    </div>
  )
}

Image Gallery with Variable Max-Height

This example creates an image gallery with custom max-heights for different viewport sizes.

This is a live editor. Play around with it!

import tailwindConfig from "./tailwind.config.js";
tailwind.config = tailwindConfig;

// App.js
export default function ImageGallery() {
  const images = [
    "https://images.unsplash.com/photo-1501785888041-af3ef285b470",
    "https://images.unsplash.com/photo-1449034446853-66c86144b0ad",
    "https://images.unsplash.com/photo-1516298773066-c48f8e9bd92b",
  ]

  return (
    <div className="p-8 bg-gray-900">
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        {images.map((image, index) => (
          <div 
            key={index}
            className="group relative overflow-hidden rounded-2xl 
                       max-h-gallery-sm md:max-h-gallery-base lg:max-h-gallery-full
                       transition-all duration-300 hover:scale-105"
          >
            <img
              src={image}
              alt={`Gallery image ${index + 1}`}
              className="w-full h-full object-cover"
            />
            <div className="absolute inset-0 bg-black bg-opacity-0 group-hover:bg-opacity-50 transition-all duration-300">
              <div className="absolute bottom-0 left-0 right-0 p-6 translate-y-full group-hover:translate-y-0 transition-transform duration-300">
                <h3 className="text-white text-xl font-bold mb-2">
                  Landscape {index + 1}
                </h3>
                <p className="text-gray-200">
                  Click to view full resolution image
                </p>
              </div>
            </div>
          </div>
        ))}
      </div>
    </div>
  )
}

Best Practices

Maintain Design Consistency

Using Max-Height in Tailwind CSS requires thoughtful planning to maintain a cohesive aesthetic across your project. Always begin by leveraging Tailwind’s predefined classes such as max-h-10, max-h-full, max-h-screen, etc. for consistent values.

Consider creating custom utilities if your design system demands uncommon height constraints. This approach minimizes reliance on arbitrary values in class names, which may lead to inconsistency when overused.

Leverage Utility Combinations

Tailwind utilities thrive in combination, especially when crafting dynamic user interfaces. Pair Max-Height classes with properties like overflow-hidden, overflow-y-scroll, or transitions to form polished designs.

You can also integrate Max-Height utilities with margin, padding, and spacing utilities to create visually balanced layouts. Focusing on harmonious utility combinations ensures complex components remain intuitive to modify without excessive specificity in your CSS.

This is a live editor. Play around with it!

export default function CombinedUtilities() {
  return (
    <div className="h-screen flex justify-center items-center bg-gray-100">
      <div className="max-h-32 overflow-y-scroll bg-yellow-300 p-6 rounded-lg shadow-md">
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ut vehicula risus. 
          Morbi id posuere ligula. Suspendisse potenti. Cras tristique bibendum nulla at 
          blandit. Integer vulputate, nibh sed dignissim sagittis, justo turpis porta dolor, 
          sed tristique ante dui nec mi.
        </p>
      </div>
    </div>
  );
}

Accessibility Considerations

Enhance Readability and Navigability

Max-Height utilities can play an essential role in organizing content for better readability and navigability, especially for users relying on assistive technologies. By using appropriate Max-Height constraints, you effectively prevent oversized blocks of text or images from dominating the visible portion of your layout, ensuring a cleaner and less overwhelming user experience.

Additionally, for long-form content, provide visual cues like visible scrollbars. For example, adding overflow-y-scroll to content containers clarifies that more information exists below the visible viewport:

Support Accessible Interactive Elements

Interactive features such as media carousels, accordions, or expanding image captions rely heavily on Max-Height constraints. To make them fully accessible, test different interaction methods such as keyboard tabbing, ARIA roles, etc.

Here’s an example of an accessible accordion component:

This is a live editor. Play around with it!

export default function AccessibleAccordion() {
  return (
    <div className="max-w-2xl mx-auto p-6">
      <div className="group border rounded-lg overflow-hidden">
        <button className="w-full text-left p-4 font-medium bg-white focus:outline-none">
          Expand Content
        </button>
        <div 
          className="max-h-0 group-focus-within:max-h-[400px] overflow-hidden transition-max-height duration-300"
          role="region"
          aria-labelledby="accordion-section"
        >
          <p id="accordion-section" className="p-4 bg-gray-50">
            This text becomes visible when interacting with the expandable accordion section.  
          </p>
        </div>
      </div>
    </div>
  );
}

Debugging Common Issues

Resolve Common Problems

When working with Max-Height in Tailwind, you might encounter issues such as content overflow, unexpected alignment behaviors, or utility class overrides leading to unpredictable results. Address these challenges systematically by ensuring the parent container's height isn’t conflicting with children. Use inspection tools such as Chrome DevTools to verify the computed styles applied to elements.

Misconfigurations in utilities can also cause layout inconsistencies. For instance, applying arbitrary height values using max-h-[value] may sometimes clash with scaling behaviors defined relative to percentages (max-h-full) or viewport units (max-h-screen). Use Tailwind’s responsive breakpoints to simplify problem resolution.

Handle Nested Element Challenges

Nested layout components often amplify Max-Height problems due to compounding overflow constraints. Avoid applying height utilities redundantly throughout parent and child hierarchies. Instead, focus on the outermost wrapper for primary height restrictions while permitting more dynamic sizing further down.

Use tools like Tailwind’s aspect-ratio utility thoughtfully for problematic nested containers. Implementing predictable ratios reduces overflows in child elements, particularly for responsive image grids or nested cards.

Min Height Size

Tailwind CSS Max-Height

Overview of Max-Height

Adding the Max-Height

States and Responsiveness

Hover and Focus States

Breakpoint Modifiers

Custom Max-Height

Extending the Theme

Using Arbitrary Values

Real World Examples

Product Grid with Expandable Description

Scrollable News Feed with Fixed Height

Image Gallery with Dynamic Heights

Notification Center with Fixed Height

News Feed with Sidebar Navigation

Customization Examples

Dynamic Product Card with Custom Max-Height

Scrollable Content Panel with Custom Max-Height

Image Gallery with Variable Max-Height

Best Practices

Maintain Design Consistency

Leverage Utility Combinations

Accessibility Considerations

Enhance Readability and Navigability

Support Accessible Interactive Elements

Debugging Common Issues

Resolve Common Problems

Handle Nested Element Challenges