STYLES

Height

Control fixed, minimum, maximum, full, and viewport-aware heights with portable Dowe values.

HEIGHT VALUES

Fixed heights from the scale

Numeric values use the same logical scale on web, Android, and iOS.

h:16

h:24

h:32

FULL HEIGHT

Fill the available parent height

The full token follows the height made available by the containing layout.

dowe
Box h:40
  Box h:"full" bg:"softPrimary"

h:"full"

MINIMUM HEIGHT

Reserve space without clipping content

minH sets a lower bound and still allows the component to grow with its children.

Flexible content

This card is at least scale 32 high and can grow when more content is added.

VIEWPORT HEIGHT

Subtract a known scale value

h, minH, and maxH accept vh-<scale> when a manual surface must reserve viewport space. Scaffold already handles its fixed AppBar inset.

dowe
Box minH:"vh-16"
  Text "Viewport height minus scale 16"

MAXIMUM HEIGHT

Bound a surface without choosing overflow

maxH sets an upper bound on the component. It does not add scrolling or clipping, so use a component that explicitly owns overflow when content may exceed the limit.

dowe
Card maxH:{ xs:"vh-16" md:48 } p:6
  Text "Height-limited content"

Maximum height

The card can stay shorter, but it cannot grow past scale 48.

API

Supported props

Prop
Type
Default

No data

There are no records to display

COMPATIBILITY

Available on styled components

Layout and shell

Box, Section, Flex, Grid, AppBar, Footer, BottomBar, Sidebar, Scaffold, and Drawer.

Navigation

NavMenu, SideNav, RailNav, Tabs, and Stepper.

Content and display

Text, Title, Code, Video, Iframe, Device, Canvas, Table, Divider, Brand, Banner, Alert, Icon, Avatar, AvatarGroup, Badge, Chip, Skeleton, Card, Empty, Marquee, TypeWriter, RichText, Collapsible, Countdown, Map, Audio, Image, Accordion, Carousel, and ChatBox.

Charts

Candlestick, ArcChart, AreaChart, BarChart, LineChart, and PieChart.

Controls and forms

Input, Select, Button, IconButton, ToggleTheme, SelectTheme, Fab, Slider, Dropzone, ComboBox, CsvField, DragDrop, Editor, ImageCropper, Password, Phone, Pin, Textarea, Record, ToggleGroup, Checkbox, Color, Date, DateRange, RadioGroup, and Toggle.

Overlays

Modal, AlertDialog, Tooltip, Toast, Dropdown, and Command.

Svg supports h, but not minH or maxH. Splash, Path, and context-only entries such as Option, fabAction, comboOption, csvColumn, dragGroup, dragItem, tab, step, and region entries do not accept these height props.