Check out our free templates made with AI and polished to perfection in Windframe

Docs Import Blocks Full Pages Form Builder Pricing Support Refer and earn

max-h-full: Tailwind CSS Height class

The max-h-full class prevents an element from exceeding 100% of the height of its parent container, ensuring it remains within its boundaries.

max-h-full

The max-h-full class prevents an element from exceeding 100% of the height of its parent container, ensuring it remains within its boundaries.

Code Example

html

<div class="flex justify-center items-center">
<div class="fixed inset-0 flex items-center justify-center bg-indigo-700 bg-opacity-50">
  <div class="bg-white w-1/2 p-6 rounded shadow-lg max-h-screen overflow-y-auto">
    <h2 class="text-xl font-bold">Modal Title</h2>
    <p class="mt-4">This is a modal with a lot of content...</p>
    <div class="mt-6 h-96 bg-gray-200 p-4">
      Content area that makes modal scrollable if needed.
    </div>
  </div>
</div>
</div>

Preview

Modal Title

This is a modal with a lot of content...

Content area that makes modal scrollable if needed.

Windframe is an AI visual editor for rapidly building stunning web UIs & websites

Start building stunning web UIs & websites!

Build from scratch or select prebuilt tailwind templates

Learn more about Windframe