resize
Setting whether an element is resizable.
Overview
| Class | Declarations |
|---|---|
resize:none | resize: none;
|
resize:both | resize: both;
|
resize:horizontal | resize: horizontal;
|
resize:vertical | resize: vertical;
|
resize:block | resize: block;
|
resize:inline | resize: inline;
|
resize:<value> | resize: <value>;
|
resize exposes a browser resize affordance on eligible elements, including scroll containers. Native handles and supported directions depend on the browser and input device.
Examples
Allow both-axis resizing
Use resize:both with overflow:auto and explicit minimum and maximum dimensions. Drag the native corner handle where the platform provides one.
<!-- Both axes · constrained control --><label class="grid gap-sm"> Notes <textarea id="target" rows="3" class="overflow:auto h:96px w:240px min-h:80px min-w:160px max-h:176px max-w:100% resize:both">A clear layout leaves room for the next idea.</textarea></label>Generated CSS
@layer utilities { .resize\:both { resize: both }}The size readout follows the actual control box. User resizing is constrained by min-* and max-*; keyboard editing remains independent of the resize handle.
Restrict resizing to one axis
Compare resize:vertical and resize:horizontal on the same initial box. Only the requested dimension can change through the native handle.
<!-- Vertical only --><label class="grid gap-sm"> Notes <textarea id="target" rows="3" class="overflow:auto h:96px w:240px min-h:80px min-w:160px max-h:176px max-w:100% resize:vertical">A clear layout leaves room for the next idea.</textarea></label><!-- Horizontal only --><label class="grid gap-sm"> Notes <textarea id="target" rows="3" class="overflow:auto h:96px w:240px min-h:80px min-w:160px max-h:176px max-w:100% resize:horizontal">A clear layout leaves room for the next idea.</textarea></label>Horizontal growth remains bounded by the preview width. On mobile, a browser may omit native handles; the editable textarea still works.
Disable native resizing
resize:none removes the manual resize affordance. It does not disable editing or scrolling within the control.
<!-- Fixed box · editable content --><label class="grid gap-sm"> Notes <textarea id="target" rows="3" class="overflow:auto h:96px w:240px min-h:80px min-w:160px max-h:176px max-w:100% resize:none">Line one.Line two.Line three.Line four.Line five.Line six.</textarea></label>Use the scrollbar, touch scrolling or keyboard to reach the text. This control has a fixed starting height rather than JavaScript auto-growth.
Apply conditionally
Allow vertical resizing at sm while keeping it disabled below that breakpoint and in print.
<!-- None → vertical at sm --><label class="grid gap-sm"> Notes <textarea id="target" rows="3" class="overflow:auto h:96px w:240px min-h:80px min-w:160px max-h:176px max-w:100% resize:none resize:vertical@screen@sm">A clear layout leaves room for the next idea.</textarea></label>After a native resize, changing the resize property does not reset the user’s dimensions. Reloading the preview restores the authored initial size.