max-h-screen: Tailwind CSS Height class
The max-h-screen class ensures that an element never grows taller than the full height of the viewport (100vh).
max-h-screen
The max-h-screen class ensures that an element never grows taller than the full height of the viewport (100vh). This is great for making sure modal windows or sections do not overflow the screen.
Code Example
html
<div class="fixed inset-0 flex items-center justify-center bg-indigo-800 bg-opacity-50"> <div class="bg-white w-1/2 p-9 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-64 bg-indigo-100 p-4 rounded"> Content area that makes modal scrollable if needed. </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!
