Min Height

Defines the minimum height of an element.

Classes#

Class	Properties
min-h-0	min-height: 0px;
min-h-full	min-height: 100%;
min-h-screen	min-height: 100vh;

Examples#

min-h-full

<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="min-h-full border-round bg-primary font-bold p-3 flex align-items-center justify-content-center">min-h-full</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:min-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

min-h-0 on small screen

<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="min-h-0 md:min-h-full border-round bg-primary font-bold p-3 flex align-items-center justify-content-center">min-h-0 on small screen</div>
    </div>
</div>