⌘ K
esc

    Max Height

    Defines the maximum height of an element.

    Classes
    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;
    Examples
    max-h-full
    
    <div class="card">
        <div class="flex flex-wrap align-items-center justify-content-center card-container blue-container">
            <div class="border-round bg-blue-100 w-12rem h-6rem p-3 m-3">
                <div class="h-30rem max-h-full border-round bg-blue-500 text-white font-bold p-3 flex align-items-center justify-content-center">max-h-full</div>
            </div>
        </div>
    </div>
    
    
    Responsive

    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.

    • sm: small screens e.g. phones
    • md: medium screens e.g. tablets
    • lg: large screens e.g. notebooks
    • xl: larger screens e.g monitors
    max-h-0 on small screen
    
    <div class="card">
        <div class="flex flex-wrap align-items-center justify-content-center card-container yellow-container">
            <div class="border-round bg-yellow-100 w-20rem h-10rem p-3 m-3">
                <div class="h-30rem max-h-0 md:max-h-full border-round bg-yellow-500 text-gray-900 font-bold p-3 flex align-items-center justify-content-center" >max-h-0 on small screen</div>
            </div>
        </div>
    </div>