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.
On this page
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.
Related Documentation#
- 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.