How to Use CSS Resize on Textarea and Div

The CSS resize property enables developers to grant users manual control over an element's dimensions by displaying an interactive grab handle on its bottom-right corner. While <textarea> elements natively support this behavior by default, applying it to standard block containers like <div> requires a specific combination of CSS properties, primarily adjusting the container's overflow settings. This guide explains the core values of the resize property, the prerequisite conditions for non-form elements, and how to constrain sizing with boundary rules.

Core Values of the resize Property

The resize property accepts four primary values that determine the directions in which an element can be stretched:

• both: Permits the user to adjust the width and height simultaneously or independently.
• horizontal: Limits user adjustment strictly to the element's width.
• vertical: Limits user adjustment strictly to the element's height.
• none: Disables resizing entirely, removing any existing resizing handle.

Resizing <textarea> Elements

Web browsers apply resize: both to <textarea> elements by default. Developers often use the resize property on text areas to restrict or disable user adjustments:

/* Disable resizing on a textarea */
textarea.fixed {
  resize: none;
}

/* Allow only vertical stretching */
textarea.vertical-only {
  resize: vertical;
}

Disabling or limiting the resize direction prevents users from accidentally breaking form layouts by expanding input fields beyond their parent containers.

Enabling Resize on <div> Containers

By default, standard HTML containers such as <div>, <section>, or <article> have an overflow value of visible. The CSS specification dictates that the resize property has no effect on an element unless its overflow property is set to something other than visible.

To enable manual resizing on a <div>, you must pair resize with overflow: auto, overflow: hidden, or overflow: scroll:

.resizable-box {
  width: 300px;
  height: 200px;
  border: 1px solid #ccc;
  
  /* Required: overflow must not be 'visible' */
  overflow: auto;
  
  /* Enables resizing in both directions */
  resize: both;
}

When these rules are applied, a small draggable handle appears in the corner of the <div>, allowing users to click and drag to resize the container directly in the browser.

Constraining Dimensions with Min and Max Limits

Allowing unrestricted resizing can lead to layout issues where containers become too small to read or too large for the screen. To maintain layout integrity, combine resize with dimension constraints:

.controlled-container {
  width: 400px;
  height: 250px;
  overflow: auto;
  resize: both;

  /* Prevent the box from becoming too small */
  min-width: 200px;
  min-height: 150px;

  /* Prevent the box from breaking the screen boundary */
  max-width: 800px;
  max-height: 600px;
}

The browser respects these boundary limits dynamically, stopping the resize action once the element reaches the specified minimum or maximum dimensions.