Syntax
max-height
Setting the maximum height of an element.
Overview
| Class | Declarations |
|---|---|
max-h:size | max-height: size/16rem;
|
max-vh | max-height: 100vh;
|
max-h:full | max-height: 100%;
|
max-h:fit | max-height: fit-content;
|
max-h:min | max-height: min-content;
|
max-h:max | max-height: max-content;
|
max-h:screen-4xs | max-height: 22.5rem;
|
max-h:screen-3xs | max-height: 30rem;
|
max-h:screen-2xs | max-height: 37.5rem;
|
max-h:screen-xs | max-height: 48rem;
|
max-h:screen-sm | max-height: 52.125rem;
|
max-h:screen-md | max-height: 64rem;
|
max-h:screen-lg | max-height: 80rem;
|
max-h:screen-xl | max-height: 90rem;
|
max-h:screen-2xl | max-height: 100rem;
|
max-h:screen-3xl | max-height: 120rem;
|
max-h:screen-4xl | max-height: 160rem;
|
Conditionally apply
Apply styles based on different states using selectors and applying conditionally.
<div class="max-h:full:hover max-h:full@sm max-h:full@dark max-h:full@print">…</div>