How to auto-resize a textarea (or other inputs) in pure CSS

Modern CSS offers the field-sizing Show archive.org snapshot property to allow elements to automatically adjust size (width and/or height) to fit their contents.
The most common use case are textareas which start fairly small (e.g. 2 or 3 rows tall) but grow when users enter longer text.

Usage

textarea {
  field-sizing: content;
}

That's it!

Browser Support

Since June 2026 this is supported in all browsers Show archive.org snapshot and part of Baseline 2026.

• Chrome/Edge 123 (March 2024)
• Safari 26.2 (November 2025)
• Firefox 152 (June 2026)

Suggested legacy solution

If you need to support legacy browsers, I suggest using a small JavaScript library like autosize Show archive.org snapshot .
While at it, I also like to disable manual resizing.

@supports (field-sizing: content) {
  textarea {
    field-sizing: content;
    resize: none;
  }
}

import autosize from 'autosize'

if (!CSS.supports('field-sizing', 'content')) {
  autosize(element) // simplified; you also need `autosize.destroy` unless you're building an MPA.
}

Note how we check for field-sizing support in both our CSS and JavaScript. We want neither solution to affect the other.

Note

Unlike field-sizing, any JavaScript auto-resizing library likely has issues with elements inside hidden containers or elements that are not yet attached to the DOM.
When adding changes to your application that may cause such issues, be sure to check in browsers that don't support field-sizing if everything still works as expected.