Codectionary / Developer documentation / CSS

User-resizable Regions with resize

resize lets users change an eligible box’s dimensions through a browser-provided affordance. It commonly applies to textareas or boxes with non-visible overflow. min/max dimensions constrain resizing. The exact affordance and touch support depend on the browser.

Syntax

.panel { overflow: auto; resize: both; min-width: 12rem; }

Examples

User-resizable Regions with resize: working example

Run this CSS against the example’s own HTML. The explanation describes the expected result.

/* Neutral page for this self-contained document. */
body { color: #182338; background: #fff; }

.panel { width: 20rem; height: 10rem; min-width: 12rem; max-width: 90vw; min-height: 6rem; overflow: auto; resize: both; border: 1px solid; padding: 1rem; }
  1. Expected result: The notes panel can be resized with a supported pointer affordance and scrolls when needed.
  2. overflow: auto makes excess content accessible and enables this box’s resize behavior.
  3. Minimum dimensions prevent shrinking it to an unusable size.
HTML used by this example

<div class="panel"><h2>Resizable notes</h2><p>Drag the resize handle if your browser provides one. The region scrolls when its content exceeds the available space.</p></div>

Best practices

  • Do not make resizing the only way to access essential content.
  • Allow textareas to grow where possible instead of forcing resize: none.

Runtime & versions

Web browsers. Feature availability depends on the language and runtime version used by your project; consult the official reference below.

CSS specifications (modules)

Specifications & further reading