Resizable panels
resize
Limited availability
Chrome4
Edge79
Firefox5
Safari4
Features it needs
- resize (CSS property)Limited availability
A resizable-panel library tracks pointer events on a drag handle, computes the new size, and writes it back to state on every move. The resize property gives one element a drag handle for free: the browser tracks the pointer and grows or shrinks the element, no JavaScript involved. It only resizes the element it is set on, so it covers a single sidebar or textarea, not a split view where dragging one panel has to shrink its neighbor.
When this applies
Letting someone drag-resize a single panel, such as a sidebar or a textarea.
The native approach
.sidebar {
resize: horizontal;
overflow: auto;
min-width: 12rem;
max-width: 32rem;
}When the dependency is still right
An answer that always says "the platform covers it" is worse than no answer. These are the cases where this one does not hold.
- The panels have to be resizable on a phone. Safari on iOS does not implement the resize property at all, so the handle simply is not there.
- You need the block/inline logical values rather than horizontal/vertical/both. Those reached Chrome 118, Firefox 63 and Safari 16; the classic physical-direction values have been supported everywhere for over a decade.
- You need multiple panels to resize together, such as a split view where dragging one edge shrinks its neighbor. resize only affects the element it is set on.
- You need to read back or persist the size someone chose. resize has no resize event; ResizeObserver still covers that, and it is a JavaScript API, not CSS.
- You need to style the drag handle itself, or place it somewhere other than the element's edge or corner. The native handle's appearance is fixed.
- You need a minimum of two resizable regions sharing the freed-up or reclaimed space, the way a split-pane library redistributes width between panels.