Max-Height and Min-Height

Constrain the maximum and minimum heights of widgets using the max-h-* and min-h-* utilities. Supports pixel-based, percentage-based, and viewport-relative values.

Basic Usage
Quick Reference
How Values Are Calculated
Arbitrary Values
Responsive Design
Related Documentation

import 'package:fluttersdk_wind/fluttersdk_wind.dart';

WContainer(
  className: 'max-h-[200] bg-blue-500 dark:bg-blue-700',
  child: WText('Max height: 200px'),
)

WContainer(
  className: 'min-h-[100] bg-orange-500 dark:bg-orange-700',
  child: WText('Min height: 100px'),
)

Basic Usage

Use max-h-* to prevent a widget from growing beyond a certain height. Use min-h-* to ensure it never shrinks below a minimum. Both accept the same value forms as the h-* utilities.

WContainer(
  className: 'max-h-16 bg-blue-500 dark:bg-blue-700',
  child: WText('Max height: 64px'), // 16 * 4 (Pixel Factor)
)

WContainer(
  className: 'min-h-10 bg-yellow-500 dark:bg-yellow-700',
  child: WText('Min height: 40px'), // 10 * 4 (Pixel Factor)
)

Quick Reference

Max-Height

Class	Description	Example
`max-h-{value}`	Maximum height in pixels (scaled by Pixel Factor)	`max-h-20`
`max-h-[{value}]`	Arbitrary maximum height in pixels	`max-h-[200]`
`max-h-full`	100% of the parent's height	`max-h-full`
`max-h-screen`	100% of the viewport height	`max-h-screen`
`max-h-{x}/{y}`	Percentage of the parent's height	`max-h-1/2`
`max-h-[{value}vh]`	Percentage of the viewport height	`max-h-[90vh]`

Min-Height

Class	Description	Example
`min-h-{value}`	Minimum height in pixels (scaled by Pixel Factor)	`min-h-20`
`min-h-[{value}]`	Arbitrary minimum height in pixels	`min-h-[200]`
`min-h-full`	100% of the parent's height	`min-h-full`
`min-h-screen`	100% of the viewport height	`min-h-screen`
`min-h-{x}/{y}`	Percentage of the parent's height	`min-h-1/2`
`min-h-[{value}vh]`	Percentage of the viewport height	`min-h-[90vh]`

How Values Are Calculated

Predefined Sizes

Values are multiplied by the Pixel Factor.

Example: max-h-16 → 16 × 4 (Pixel Factor) = 64px.
Example: min-h-10 → 10 × 4 (Pixel Factor) = 40px.

Special Keywords

Value	Result
`full`	`double.infinity` (100% of parent)
`screen`	Viewport height via `MediaQuery`

Fraction Syntax

Use max-h-x/y or min-h-x/y to express a fraction of the parent height.

Example: max-h-3/4 → 75% of the parent's height.

Viewport Height

Append vh inside brackets for a percentage of the viewport.

Example: max-h-[90vh] → 90% of the viewport height.

Arbitrary Values

Use bracket notation for an exact pixel value, bypassing the Pixel Factor.

WContainer(
  className: 'max-h-[400] min-h-[100] bg-gray-200 dark:bg-gray-700',
  child: WText('Height stays between 100px and 400px.'),
)

Responsive Design

Combine max/min height with breakpoint prefixes for responsive constraints.

WContainer(
  className: 'max-h-[300] md:max-h-[500] lg:max-h-screen bg-blue-500 dark:bg-blue-700',
  child: WText('Responsive max-height.'),
)

Available breakpoints: sm, md, lg, xl, 2xl.

Height — control widget height directly.
Max-Width and Min-Width — constrain width bounds.
Width — control widget width directly.
Pixel Factor — configure the base unit.
WContainer — the primary container widget.