Max Height

Limit the maximum height of an element.

Widely available

This feature is well established and works across many devices and browser versions.

Chrome
Edge
Firefox
Safari

max-h-0
max-height: 0;
max-h-1
max-height: .25rem;
max-h-2
max-height: .5rem;
max-h-3
max-height: .75rem;
max-h-4
max-height: 1rem;
max-h-5
max-height: 1.25rem;
max-h-6
max-height: 1.5rem;
max-h-7
max-height: 1.75rem;
max-h-8
max-height: 2rem;
max-h-9
max-height: 2.25rem;
max-h-10
max-height: 2.5rem;
max-h-11
max-height: 2.75rem;
max-h-12
max-height: 3rem;
max-h-13
max-height: 3.25rem;
max-h-14
max-height: 3.5rem;
max-h-15
max-height: 3.75rem;
max-h-16
max-height: 4rem;
max-h-17
max-height: 4.25rem;
max-h-18
max-height: 4.5rem;
max-h-19
max-height: 4.75rem;
max-h-20
max-height: 5rem;
max-h-21
max-height: 5.25rem;
max-h-22
max-height: 5.5rem;
max-h-23
max-height: 5.75rem;
max-h-24
max-height: 6rem;
max-h-25
max-height: 6.25rem;
max-h-26
max-height: 6.5rem;
max-h-27
max-height: 6.75rem;
max-h-28
max-height: 7rem;
max-h-29
max-height: 7.25rem;
max-h-30
max-height: 7.5rem;
max-h-31
max-height: 7.75rem;
max-h-32
max-height: 8rem;
max-h-33
max-height: 8.25rem;
max-h-34
max-height: 8.5rem;
max-h-35
max-height: 8.75rem;
max-h-36
max-height: 9rem;
max-h-37
max-height: 9.25rem;
max-h-38
max-height: 9.5rem;
max-h-39
max-height: 9.75rem;
max-h-40
max-height: 10rem;
max-h-41
max-height: 10.25rem;
max-h-42
max-height: 10.5rem;
max-h-43
max-height: 10.75rem;
max-h-44
max-height: 11rem;
max-h-45
max-height: 11.25rem;
max-h-46
max-height: 11.5rem;
max-h-47
max-height: 11.75rem;
max-h-48
max-height: 12rem;
max-h-49
max-height: 12.25rem;
max-h-50
max-height: 12.5rem;
max-h-51
max-height: 12.75rem;
max-h-52
max-height: 13rem;
max-h-53
max-height: 13.25rem;
max-h-54
max-height: 13.5rem;
max-h-55
max-height: 13.75rem;
max-h-56
max-height: 14rem;
max-h-57
max-height: 14.25rem;
max-h-58
max-height: 14.5rem;
max-h-59
max-height: 14.75rem;
max-h-60
max-height: 15rem;
max-h-61
max-height: 15.25rem;
max-h-62
max-height: 15.5rem;
max-h-63
max-height: 15.75rem;
max-h-64
max-height: 16rem;
max-h-65
max-height: 16.25rem;
max-h-66
max-height: 16.5rem;
max-h-67
max-height: 16.75rem;
max-h-68
max-height: 17rem;
max-h-69
max-height: 17.25rem;
max-h-70
max-height: 17.5rem;
max-h-71
max-height: 17.75rem;
max-h-72
max-height: 18rem;
max-h-73
max-height: 18.25rem;
max-h-74
max-height: 18.5rem;
max-h-75
max-height: 18.75rem;
max-h-76
max-height: 19rem;
max-h-77
max-height: 19.25rem;
max-h-78
max-height: 19.5rem;
max-h-79
max-height: 19.75rem;
max-h-80
max-height: 20rem;
max-h-81
max-height: 20.25rem;
max-h-82
max-height: 20.5rem;
max-h-83
max-height: 20.75rem;
max-h-84
max-height: 21rem;
max-h-85
max-height: 21.25rem;
max-h-86
max-height: 21.5rem;
max-h-87
max-height: 21.75rem;
max-h-88
max-height: 22rem;
max-h-89
max-height: 22.25rem;
max-h-90
max-height: 22.5rem;
max-h-91
max-height: 22.75rem;
max-h-92
max-height: 23rem;
max-h-93
max-height: 23.25rem;
max-h-94
max-height: 23.5rem;
max-h-95
max-height: 23.75rem;
max-h-96
max-height: 24rem;
max-h-97
max-height: 24.25rem;
max-h-98
max-height: 24.5rem;
max-h-99
max-height: 24.75rem;
max-h-100
max-height: 25rem;
max-h-auto
max-height: auto;
max-h-dvh
max-height: 100dvh;
max-h-dvw
max-height: 100dvw;
max-h-vh
max-height: 100vh;
max-h-vw
max-height: 100vw;
max-h-vi
max-height: 100vi;
max-h-vb
max-height: 100vb;
max-h-svh
max-height: 100svh;
max-h-svw
max-height: 100svw;
max-h-lvh
max-height: 100lvh;
max-h-lvw
max-height: 100lvw;
max-h-vmin
max-height: 100vmin;
max-h-vmax
max-height: 100vmax;
max-h-fc
max-height: fit-content;
max-h-full
max-height: 100%;
max-h-half
max-height: 50%;
max-h-max
max-height: max-content;
max-h-min
max-height: min-content;
max-h-px
max-height: 1px;
max-h-s
max-height: stretch;
max-h-sm
max-height: 40rem;
max-h-md
max-height: 48rem;
max-h-lg
max-height: 64rem;
max-h-xl
max-height: 80rem;
max-h-xxl
max-height: 96rem;

Responsiveness

Use breakpoint prefixes to target different screen sizes. Styles apply from the breakpoint & up.

Target viewport sizes with breakpoint prefixes.

sm:max-h-(value)
Small≥640px
md:max-h-(value)
Medium≥768px
lg:max-h-(value)
Large≥1024px
xxl:max-h-(value)
Extra Large≥1536px

Hover State

Apply styles conditionally on hover using the h: prefix.

Add the h: prefix to apply styles only when the user hovers over the element.

Syntax:h:max-h-(value)