Defines the maximum height of an element.
| Class | Properties |
|---|---|
| max-h-0 | max-height: 0px; |
| max-h-full | max-height: 100%; |
| max-h-screen | max-height: 100vh; |
| max-h-1rem | max-height: 1rem; |
| max-h-2rem | max-height: 2rem; |
| max-h-3rem | max-height: 3rem; |
| max-h-4rem | max-height: 4rem; |
| max-h-5rem | max-height: 5rem; |
| max-h-6rem | max-height: 6rem; |
| max-h-7rem | max-height: 7rem; |
| max-h-8rem | max-height: 8rem; |
| max-h-9rem | max-height: 9rem; |
| max-h-10rem | max-height: 10rem; |
| max-h-11rem | max-height: 11rem; |
| max-h-12rem | max-height: 12rem; |
| max-h-13rem | max-height: 13rem; |
| max-h-14rem | max-height: 14rem; |
| max-h-15rem | max-height: 15rem; |
| max-h-16rem | max-height: 16rem; |
| max-h-17rem | max-height: 17rem; |
| max-h-18rem | max-height: 18rem; |
| max-h-19rem | max-height: 19rem; |
| max-h-20rem | max-height: 20rem; |
| max-h-21rem | max-height: 21rem; |
| max-h-22rem | max-height: 22rem; |
| max-h-23rem | max-height: 23rem; |
| max-h-24rem | max-height: 24rem; |
| max-h-25rem | max-height: 25rem; |
| max-h-26rem | max-height: 26rem; |
| max-h-27rem | max-height: 27rem; |
| max-h-28rem | max-height: 28rem; |
| max-h-29rem | max-height: 29rem; |
| max-h-30rem | max-height: 30rem; |
<div class="flex flex-wrap align-items-center justify-content-center">
<div class="border-round bg-primary-100 w-12rem h-6rem p-3 m-3">
<div class="h-30rem max-h-full border-round bg-primary font-bold p-3 flex align-items-center justify-content-center">max-h-full</div>
</div>
</div>
Responsive alternatives are available for customizations based on screen size. Add the responsive breakpoint keyword followed by a semi-colon as a prefix such as md:max-h-full to use a responsive class.
| Class | Description |
|---|---|
| sm: | small screens e.g. phones |
| md: | medium screens e.g. tablets |
| lg: | large screens e.g. notebooks |
| xl: | larger screens e.g monitors |
<div class="flex flex-wrap align-items-center justify-content-center">
<div class="border-round bg-primary-100 w-20rem h-10rem p-3 m-3">
<div class="h-30rem max-h-0 md:max-h-full border-round bg-primary font-bold p-3 flex align-items-center justify-content-center">max-h-0 on small screen</div>
</div>
</div>