Resizable
A panel the user resizes by its corner, with CSS alone.
Examples
Resizable
Drag the corner →
Both axes
Drag the corner, either way
Anatomy
.resizable | Any block. Gets the browser's resize grip in its end corner and scrolls what overflows. At least φ^4.5 ≈ 8.7rem wide, never wider than its container, as long as the container's width doesn't come from its content: in a grid or flex track, give the track minmax(0, 1fr) or min-inline-size: 0, or the track grows as you drag. |
API
| Attribute | Values | Description |
|---|---|---|
data-axis | blockboth | Which way the panel resizes. Without it, inline only. block also sets a φ³ ≈ 4.2rem minimum height; both resizes either way. |
Accessibility
- The resize grip is pointer-only; there is no keyboard way to resize. Never hide content that only becomes reachable by resizing.
- Overflow scrolls instead of clipping, so content stays reachable at any size.