resize
Controls whether users can resize an element by dragging. Used to prevent resizing on textarea or add resize capability to panels.
Class List
| Class | CSS | Description |
|---|---|---|
rzn | resize: none | No resize. Used to fix textarea size |
rzv | resize: vertical | Vertical resize only |
rzh | resize: horizontal | Horizontal resize only |
rzb | resize: both | Resize in both directions |
Visual Comparison
Try dragging each element with a resize value applied. A resize handle appears at the bottom-right corner.
None — rzn
This area cannot be resized.
No resize handle displayed
Vertical — rzv
This area can only be resized vertically. Drag the bottom-right corner.
Handle works in vertical direction only
Horizontal — rzh
This area can only be resized horizontally. Drag the bottom-right corner.
Handle works in horizontal direction only
Both — rzb
This area can be resized in both directions. Drag the bottom-right corner.
Bidirectional resize available
textarea and resize
textarea is resizable by default. Common patterns are blocking with rzn or allowing only vertical with rzv.
No resize -- rzn
Vertical only -- rzv
Practical Examples
Patterns for controlling textarea resize in forms and creating resizable panels.
<!-- Control textarea resize -->
<textarea class="w100p rzn p12px br8px" rows="4"
placeholder="Cannot resize">
</textarea>
<!-- Textarea resizable vertically only -->
<textarea class="w100p rzv p12px br8px" rows="4"
placeholder="Vertically adjustable only">
</textarea>
<!-- Resizable code panel -->
<div class="rzb oh minw20rem maxw60rem minh10rem maxh40rem
bg18181B b1pxsolid27272A br8px p2rem">
<pre>Code editor area</pre>
</div>Class Details
rznresize: none
Users cannot resize the element. Most commonly used to remove the resize handle from textarea to prevent layout breakage.
<!-- Prevent textarea resize -->
<textarea class="w100p rzn p12px br8px" rows="4"
placeholder="Fixed-size input area">
</textarea>
<!-- Fixed size panel -->
<div class="rzn oh w30rem h20rem bg18181B br8px p2rem">
Fixed size content area
</div>Common Combinations
rzn w100p | Remove textarea resize + full width |
rzn oh | Block resize + hide overflow |
rzvresize: vertical
Allows resizing in the vertical direction only. Useful when maintaining horizontal layout while letting users adjust input area height.
<!-- Textarea resizable vertically only -->
<textarea class="w100p rzv p12px br8px" rows="4"
placeholder="Only height is adjustable">
</textarea>
<!-- Vertical resize + range limit -->
<textarea class="w100p rzv minh8rem maxh30rem p12px br8px"
rows="4" placeholder="Adjust between 8rem and 30rem">
</textarea>rzhresize: horizontal
Allows resizing in the horizontal direction only. Used to let users adjust sidebar or panel width.
<!-- Horizontally resizable sidebar -->
<div class="rzh oh minw15rem maxw40rem h30rem
bg18181B b1pxsolid27272A br8px p2rem">
Sidebar area (drag horizontally)
</div>rzbresize: both
Allows resizing in both directions. Used for elements requiring free size adjustment like code editors, note panels, etc.
<!-- Free resize panel -->
<div class="rzb oh minw20rem maxw60rem minh10rem maxh40rem
bg18181B b1pxsolid27272A br8px p2rem">
A panel that can be freely resized.
Useful for code editors, note areas, etc.
</div>
<!-- Resizable code block -->
<pre class="rzb oa minw20rem minh8rem maxh50rem
bg18181B b1pxsolid27272A br8px p2rem fs14px">
const hello = "world";
console.log(hello);
</pre>overflow required
resize only works when overflow is a value other than visible (default). Always use with oh or oa.
Tips & Notes
Does not work when overflow is visible
resize is ignored on elements with overflow: visible. Always specify one of oh (hidden), oa (auto), or os (scroll).
Use rzn or rzv for textarea
Horizontal resizing of textarea in forms can break layout, so it is common to either fully block with rzn or allow only vertical with rzv.
Limit resize range with min/max
Use minw, maxw, minh, maxh with rzb or rzv to constrain the resizable range.