Max-Height

Sets the maximum height an element can have, preventing it from growing beyond the specified value. Max-height is crucial for controlling content overflow and maintaining consistent layouts regardless of content length. It's commonly used for creating scrollable sections, constraining tall elements, and ensuring elements fit properly within their container.

Sizing1 variant4 examples

Official Docs Open Playground

Basic usage:

<div class="space-y-4">
  <div class="max-h-40 overflow-auto bg-blue-100 p-4 rounded">
    <p class="mb-2">This content is in a container with max-h-40 (10rem / 160px).</p>
    <p class="mb-2">When content exceeds this height, scrolling is enabled with overflow-auto.</p>
    <p class="mb-2">This ensures the container never exceeds its maximum height.</p>
    <p class="mb-2">Additional content to demonstrate scrolling behavior.</p>
    <p class="mb-2">More content to make sure scrolling is visible.</p>
    <p>Even more content for scrolling purposes.</p>
  </div>
  
  <div class="max-h-full bg-blue-200 p-4 rounded">
    <p>max-h-full (100% of parent's height if parent has explicit height)</p>
  </div>
  
  <div class="max-h-screen bg-blue-300 p-4 rounded">
    <p>max-h-screen (100vh, full viewport height)</p>
  </div>
</div>

Examples

Different max-height values with scrollable content

<div class="space-y-4">
  <div class="max-h-40 overflow-auto bg-blue-100 p-4 rounded">
    <p class="mb-2">This content is in a container with max-h-40 (10rem / 160px).</p>
    <p class="mb-2">When content exceeds this height, scrolling is enabled with overflow-auto.</p>
    <p class="mb-2">This ensures the container never exceeds its maximum height.</p>
    <p class="mb-2">Additional content to demonstrate scrolling behavior.</p>
    <p class="mb-2">More content to make sure scrolling is visible.</p>
    <p>Even more content for scrolling purposes.</p>
  </div>
  
  <div class="max-h-full bg-blue-200 p-4 rounded">
    <p>max-h-full (100% of parent's height if parent has explicit height)</p>
  </div>
  
  <div class="max-h-screen bg-blue-300 p-4 rounded">
    <p>max-h-screen (100vh, full viewport height)</p>
  </div>
</div>

Edit in playground

Image with constrained height using max-height and object-fit

<!-- Image with constrained height -->
<div class="max-w-md mx-auto bg-white rounded-lg shadow-md overflow-hidden">
  <div class="max-h-64 overflow-hidden">
    <img class="w-full object-cover" src="https://images.unsplash.com/photo-1472214103451-9374bd1c798e" alt="Landscape">
  </div>
  <div class="p-6">
    <h3 class="font-bold text-xl mb-2">Constrained Image Height</h3>
    <p class="text-gray-700">Using max-h-64 on the image container ensures the image doesn't take up too much vertical space, creating a more balanced card design.</p>
    <p class="mt-4 text-gray-700">The image maintains its aspect ratio with object-cover while being limited in height.</p>
  </div>
</div>

Edit in playground

Dropdown menu with maximum height and scrolling for long lists

<!-- Dropdown menu with maximum height -->
<div class="relative inline-block text-left">
  <div>
    <button class="inline-flex justify-center w-full rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-sm font-medium text-gray-700">
      Dropdown Menu
      <svg class="ml-2 -mr-1 h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
        <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
      </svg>
    </button>
  </div>

  <div class="origin-top-right absolute right-0 mt-2 w-56 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5">
    <div class="max-h-60 overflow-auto py-1" role="menu">
      <a href="#" class="block px-4 py-2 text-gray-700 hover:bg-gray-100" role="menuitem">Account settings</a>
      <a href="#" class="block px-4 py-2 text-gray-700 hover:bg-gray-100" role="menuitem">Support</a>
      <a href="#" class="block px-4 py-2 text-gray-700 hover:bg-gray-100" role="menuitem">License</a>
      <a href="#" class="block px-4 py-2 text-gray-700 hover:bg-gray-100" role="menuitem">Item 4</a>
      <a href="#" class="block px-4 py-2 text-gray-700 hover:bg-gray-100" role="menuitem">Item 5</a>
      <a href="#" class="block px-4 py-2 text-gray-700 hover:bg-gray-100" role="menuitem">Item 6</a>
      <a href="#" class="block px-4 py-2 text-gray-700 hover:bg-gray-100" role="menuitem">Item 7</a>
      <a href="#" class="block px-4 py-2 text-gray-700 hover:bg-gray-100" role="menuitem">Item 8</a>
      <a href="#" class="block px-4 py-2 text-gray-700 hover:bg-gray-100" role="menuitem">Item 9</a>
      <a href="#" class="block px-4 py-2 text-gray-700 hover:bg-gray-100" role="menuitem">Item 10</a>
    </div>
  </div>
</div>

Edit in playground

Chat interface with scrollable message area using max-height and CSS calc()

<!-- Chat interface with scrollable message area -->
<div class="max-w-md mx-auto border rounded-lg overflow-hidden shadow-md flex flex-col h-96">
  <div class="border-b p-3 bg-white">
    <h3 class="font-bold">Chat with Support</h3>
  </div>
  
  <div class="max-h-[calc(100%-8rem)] overflow-y-auto flex-grow p-4 bg-gray-50">
    <div class="flex flex-col space-y-3">
      <div class="bg-gray-200 p-3 rounded-lg self-start max-w-[80%]">
        <p>Hello! How can I help you today?</p>
      </div>
      <div class="bg-blue-500 text-white p-3 rounded-lg self-end max-w-[80%]">
        <p>I'm having an issue with my recent order.</p>
      </div>
      <div class="bg-gray-200 p-3 rounded-lg self-start max-w-[80%]">
        <p>I'm sorry to hear that. Could you provide your order number?</p>
      </div>
      <div class="bg-blue-500 text-white p-3 rounded-lg self-end max-w-[80%]">
        <p>Sure, it's #12345-67890.</p>
      </div>
      <div class="bg-gray-200 p-3 rounded-lg self-start max-w-[80%]">
        <p>Thank you! I can see your order. What seems to be the issue?</p>
      </div>
      <div class="bg-blue-500 text-white p-3 rounded-lg self-end max-w-[80%]">
        <p>I received the wrong item in my package.</p>
      </div>
      <div class="bg-gray-200 p-3 rounded-lg self-start max-w-[80%]">
        <p>I understand. I'll help you resolve this right away. Could you describe what you received versus what you ordered?</p>
      </div>
    </div>
  </div>
  
  <div class="p-3 bg-white border-t">
    <div class="flex items-center space-x-2">
      <input type="text" class="flex-grow p-2 border rounded-md" placeholder="Type a message...">
      <button class="bg-blue-500 text-white p-2 rounded-md">
        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
        </svg>
      </button>
    </div>
  </div>
</div>

Edit in playground

Live Preview

Try the Max-Height utility with different values

Open Interactive Playground

Variants

max-h-0: 0px maximum height (useful for transitions); max-h-none: no maximum height; max-h-full: 100% of parent height (if parent has explicit height); max-h-screen: 100vh (full viewport height); max-h-min: min-content height; max-h-max: max-content height; max-h-fit: fit-content height; arbitrary values can be specified with max-h-[500px] syntax

0nonefullscreenminmaxfit