resize

The resize property allows you to specify whether or not an element is resizable by the user, and if so, along which direction.

Currently it is possible to control the appearance of the scrolling mechanism (if any) on an element using the overflow property (e.g. overflow: scroll vs. overflow: hidden etc.). The purpose of the resize property is to also allow control over the appearance and function of the resizing mechanism (e.g. a resize box or widget) on the element.

When an element is resizable, the user agent presents the user with a resizing mechanism, which is usually a small triangular “knob” at the bottom right corner of the element, similar to the one you see on textareas. This knob can be dragged by the user to expand the textarea in either direction — horizontally or vertically, or both.

You can make an element resizable in both directions or either horizontally or vertically.

When an element is resizable, the user can increase its size by cannot make it smaller than it is. However, some browsers such as Firefox will let the user resize an element to a size that’s smaller than its default size.

You can make any block-level and replaced element, table cell, and inline block element resizable using resize. However, resize will have no effect on the element unless the value of the overflow property is set to something other than visible. If overflow is different in a particular axis (i.e. overflow-x vs. overflow-y), then this property applies to the dimension(s) which do not have the value visible.

The resize property is also used to prevent certain user interface elements that are resizable by default from being resized, especially textareas. Sometimes allowing the user to resize an element may affect the entire layout around that element in an undesirable way, so it is sometimes preferable to either prevent the element from being resized, or restrict its resizability to one direction only, depending on the layout.

Trivia & Notes

The resizing mechanism is NOT the same as the scrolling mechanism. The scrolling mechanism allows the user to determine which portion of the contents of an element is shown. The resizing mechanism allows the user to determine the size of the element.