Auto-growing textareas
field-sizing: content
Chrome123
Edge123
Firefox152
Safari26.2
Features it needs
- field-sizingNewly available
The usual approach copies the textarea's value into a hidden mirror element, measures it, and writes the height back on every keystroke. field-sizing: content tells the control to size itself to its own value, so the growing happens during layout with no measuring and no re-render. Pair it with rows and max-height so it starts at a sensible size and stops before it eats the viewport.
When this applies
A textarea or input should grow to fit what the user has typed.
The native approach
textarea {
field-sizing: content;
/* Where it starts. */
min-height: 3lh;
/* Where it stops growing. */
max-height: 12lh;
}
/* Works on inputs and selects too. */
input[type="text"] {
field-sizing: content;
min-width: 8ch;
}When the dependency is still right
An answer that always says "the platform covers it" is worse than no answer. These are the cases where this one does not hold.
- Your support target reaches below Chrome 123, Firefox 152 or Safari 26.2. Every engine ships field-sizing now, but Safari only at the end of 2025 and Firefox in 2026, so an older target still needs the fallback.
- You need the measured height in JavaScript, for example to sync a neighbouring element.
- You need to animate the height change. field-sizing resizes without a transition.
Building it
This catalog stops at the swap. These guides go through the implementation and the fallbacks. They come from Google Chrome's modern-web-guidance, Apache-2.0.