Interaction
resize
resize adds a handle to the corner of an element so people can drag to change its size. You can limit it to one direction.
Syntax
none | both | horizontal | vertical | block | inlinePreview
NoteThe quick brown fox jumps over the lazy dog. 素早い茶色の狐がのろまな犬を飛び越える。
Presets
Drag the bottom-right corner to resize
Code
.box > :nth-child(2) {
overflow: auto;
resize: both;
}Controls
resizeboth
NoteThe quick brown fox jumps over the lazy dog. 素早い茶色の狐がのろまな犬を飛び越える。
About
Values
none(initial): no handle.both: both the width and the height can change.horizontal/vertical: only the width / only the height.block/inline: only the direction lines stack in / only the direction text runs in. In horizontal writing they matchvertical/horizontal; in vertical writing they swap.
The preview sets it on the note (the second child). Drag the bottom-right corner of the note to resize it.
Only for elements that scroll
resize only works on elements whose overflow is auto, scroll or hidden. With the initial visible, or with clip, no handle appears, so the preview also writes overflow: auto as a helper declaration. (Some browsers also apply it to images and iframes regardless of overflow.)
Watch out
- Browsers style
textareaso it can already be resized in both directions. Writeresize: verticalorresize: nonewhen it shouldn’t break your layout. - While dragging, the browser writes
widthandheightin px into the element’sstyleattribute. Usemax-widthormin-heightto keep the size within bounds. - Some browsers don’t let you drag the handle with touch.