Max-Height

Use max-height utilities to constrain an element’s height to a maximum value. Tailwind v4 ships numeric (max-h-<number>), fractional (max-h-1/2, max-h-9/10, …), and viewport (max-h-screen, max-h-svh/max-h-lvh/max-h-dvh) variants on a single resolver.

Basic example

Use max-h-<number> utilities like max-h-24 and max-h-64 to set an element to a fixed maximum height based on the spacing scale.

Style('h-96 ...', children: [
  Style('h-full max-h-80 ...', child: Text('max-h-80')),
  Style('h-full max-h-64 ...', child: Text('max-h-64')),
  Style('h-full max-h-48 ...', child: Text('max-h-48')),
  Style('h-full max-h-40 ...', child: Text('max-h-40')),
  Style('h-full max-h-32 ...', child: Text('max-h-32')),
  Style('h-full max-h-24 ...', child: Text('max-h-24')),
])

Using a percentage

Use max-h-full or max-h-<fraction> utilities like max-h-1/2 and max-h-9/10 to give an element a percentage-based maximum height. Fractions are resolved against the parent’s available height via LayoutBuilder at render time.

Style('h-96 ...', children: [
  Style('h-full max-h-9/10 ...', child: Text('max-h-9/10')),
  Style('h-full max-h-3/4 ...', child: Text('max-h-3/4')),
  Style('h-full max-h-1/2 ...', child: Text('max-h-1/2')),
  Style('h-full max-h-1/4 ...', child: Text('max-h-1/4')),
  Style('h-full max-h-full ...', child: Text('max-h-full')),
])

Matching the viewport

Use the max-h-screen utility to cap an element’s height at the viewport height:

Style('max-h-screen', child: /* ... */)

The dynamic / large / small viewport variants (max-h-dvh, max-h-lvh, max-h-svh) collapse to the same MediaQuery.sizeOf(context).height value in Flutter — no dynamic-viewport distinction.

Using a custom value

Use bracket syntax for arbitrary values: max-h-[220px], max-h-[16rem]. Unit suffixes are stripped.

Style('max-h-[220px]', child: /* ... */)

Class reference

Class	Value
max-h-<number>	spacing scale × <number> (e.g. max-h-4 = 16px)
max-h-<fraction>	<fraction> × parent height (e.g. max-h-1/2 = 50%)
max-h-px	1px
max-h-full	100% (infinity)
max-h-screen	viewport height (MediaQuery.sizeOf(context).height)
max-h-dvh / max-h-lvh / max-h-svh	viewport height (collapsed; Flutter has no dynamic-viewport distinction)
max-h-[<value>]	arbitrary value (units stripped)

max-h-(<custom-property>) is resolved against theme-defined StyleThemeData.customProperties — e.g. max-h-(--my-max-height) behaves like max-h-[200px] when the theme defines --my-max-height: '200px'. Cascade-inherited or JS-set CSS variables remain out of scope.

Parity omissions

• max-h-none — equivalent to omitting max-h-*. Tracked for a future PR if a docs page exercises it.
• max-h-min / max-h-max / max-h-fit — content-based sizing. Tracked for a future PR.
• max-h-lh — line-height-based sizing. Tracked for a future PR.
• Dynamic-viewport distinction — see height docs for details.