Min-Height

Use min-height utilities to set the minimum height of an element, preventing it from collapsing below that size. Tailwind v4 ships numeric (min-h-<number>), fractional (min-h-1/2, min-h-9/10, …), and viewport (min-h-screen, min-h-svh/min-h-lvh/min-h-dvh) variants on a single resolver.

Basic example

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

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

Using a percentage

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

Style('min-h-full ...', child: Text('min-h-full'))
Style('min-h-9/10 ...', child: Text('min-h-9/10'))
Style('min-h-3/4 ...', child: Text('min-h-3/4'))
Style('min-h-1/2 ...', child: Text('min-h-1/2'))
Style('min-h-1/3 ...', child: Text('min-h-1/3'))

Matching the viewport

Use the min-h-screen utility to make an element have a minimum height of the viewport:

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

The dynamic / large / small viewport variants (min-h-dvh, min-h-lvh, min-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: min-h-[220px], min-h-[12rem]. Unit suffixes are stripped.

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

Class reference

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

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

Parity omissions

• min-h-auto — Flutter widgets default to content-sized; covered by omitting min-h. Tracked for a future PR.
• min-h-min / min-h-max / min-h-fit — content-based sizing. Tracked for a future PR.
• min-h-lh — line-height-based sizing. Tracked for a future PR.
• Dynamic-viewport distinction — see height docs for details.