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 to fit their contents.
The most common use case area textareas which start fairly small (e.g. 2 or 3 rows tall) but grow when users enter longer text.

Usage

Copytextarea {
  field-sizing: content;
}

That's it! At least in modern Chromium-based browsers.

Limited browser support

Support is still lacking in Firefox and Safari (as of mid 2025). If you want auto-sizing inputs in those browsers, you still need a JavaScript solution.

Suggested usage

I suggest using a small JavaScript library like autosize Show archive.org snapshot for browsers that do not support field-sizing yet.
While at it, I also like to disable manual resizing.

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

Copyimport 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

Any JavaScript auto-resizing library likely has issues with elements inside hidden containers or elements that are not yet attached to the DOM. field-sizing has none of those issues which is why we want to use it.
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 in those as well.