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 a drag and drop builder for rapidly building tailwind css websites and UIs
Start building stunning tailwind UIs!
