Utilities for controlling element dimensions and flex behavior. Use these to create layouts that fill available space.
Height Utilities
Fixed rem-based heights, percentage heights, and viewport heights.
Fixed Heights (rem-based)
Use .h-{size}x for fixed heights based on rem units
.h-5x5rem
.h-8x8rem
.h-10x10rem
.h-15x15rem
Min-Height (rem-based)
Use .min-h-{size}x for minimum heights
.min-h-10xContent can grow
.min-h-15xMinimum 15rem
Percentage Heights
Fill parent container with .h-full or viewport with .h-screen
.h-full fills parent (100%)
Max-Height with Overflow
Combine .max-h-{size}x with .overflow-y-auto for scrollable areas
This container has a max height of 15rem.
When content exceeds this height, it becomes scrollable.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation.
Duis aute irure dolor in reprehenderit in voluptate.
Excepteur sint occaecat cupidatat non proident.
Flex Utilities
Control how flex items grow and shrink to fill available space.
.flex-1
Items grow equally to fill space, ignoring content size
.flex-1
.flex-1
.flex-1
.flex-auto
Items grow based on content size
.flex-grow / .flex-shrink-0
Mixed: one item grows, others stay fixed
.flex-grow fills remaining space
.flex-none
Item doesn't grow or shrink
.flex-1
.flex-none
.flex-1
Practical Example: Expandable Table Card
Use .flex-1 or .min-h-{size}x to ensure table cards have enough height for detail panels, even with few rows.
Without min-height
Table card shrinks to content - detail panel would be tiny
| Name | Status |
|---|---|
| Item 1 | Active |
| Item 2 | Pending |
With .min-h-30x
Table card maintains minimum height for detail panel
| Name | Status |
|---|---|
| Item 1 | Active |
| Item 2 | Pending |
Full-Height Layout Pattern
Filters + table card that fills remaining viewport height using flex
<!-- Container with flex column, full viewport height -->
<div class="d-flex flex-column h-screen">
<!-- Header (fixed height) -->
<header class="pa-header">...</header>
<!-- Main content area -->
<main class="flex-1 d-flex flex-column p-base">
<!-- Filters (shrink to content) -->
<div class="pa-card mb-base flex-shrink-0">
<!-- filter inputs -->
</div>
<!-- Table card fills remaining space -->
<div class="pa-table-card flex-1 min-h-30x">
<div class="pa-table-card__body h-full">
<div class="pa-detail-view h-full">
<!-- table + detail panel -->
</div>
</div>
</div>
</main>
</div>Live Demo
Filters + table card with detail panel in a fixed-height container (simulating viewport)
CSS Classes Reference
Fixed Height (rem-based)
.h-2xthrough.h-50x- Fixed heights (2rem to 50rem).min-h-2xthrough.min-h-30x- Minimum heights.max-h-5xthrough.max-h-50x- Maximum heights
Percentage / Viewport Height
.h-full-height: 100%.h-screen-height: 100vh.min-h-full-min-height: 100%.min-h-screen-min-height: 100vh.max-h-full-max-height: 100%.max-h-screen-max-height: 100vh
Flex Utilities
.flex-1-flex: 1 1 0%(grow/shrink equally, ignore content).flex-auto-flex: 1 1 auto(grow/shrink based on content).flex-initial-flex: 0 1 auto(shrink only, default).flex-none-flex: none(don't grow or shrink).flex-grow-flex-grow: 1.flex-grow-0-flex-grow: 0.flex-shrink-flex-shrink: 1.flex-shrink-0-flex-shrink: 0
Overflow (pair with height)
.overflow-auto- Scroll when needed.overflow-y-auto- Vertical scroll when needed.overflow-hidden- Hide overflow.overflow-y-overlay- Overlay scrollbar (Chromium)