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, and each one reads in the terminal through its own command.
- Form fields automatically fit contents
npx -y modern-web-guidance@latest retrieve "form-fields-automatically-fit-contents"
Signs it was hand-rolled
No package is involved in any of these, so nothing would match in a package.json. If the code looks like one of them, this rule applies anyway, and the conditions above still decide.
- an input handler setting style.height to auto and then to scrollHeight in pixels, so the textarea remeasures on every keystroke
- a hidden mirror div kept in sync with the textarea's value, measured to decide how tall the real field should be