Entry 08

Textarea that grows with its content

Use it for any multi-line input, such as a chat composer or a comment box. field-sizing: content sizes the textarea to its text, so there is no auto-grow script and no hidden mirror element.

Open

Type or paste several lines into each. Both start at three lines and stop at twelve. The second one eases to its new height.

Code CSS · HTML · JS · 4 blocks · 20 lines

textarea {
  field-sizing: content;
  min-height: 3lh;
  max-height: 12lh;
  resize: none;
}

The height snaps to each new line. To animate it, wrap the textarea and let a ResizeObserver copy its height onto the wrapper. The wrapper transitions.

<div class="field"><textarea></textarea></div>

.field {
  box-sizing: content-box;
  overflow: clip;
}

@media (prefers-reduced-motion: no-preference) {
  .field { transition: height 0.2s var(--ease-out, ease-out); }
}

const textarea = document.querySelector(".field textarea");

new ResizeObserver(([entry]) => {
  textarea.parentElement.style.height = `${entry.borderBoxSize[0].blockSize}px`;
}).observe(textarea);

Why it works, the rules and the credits 3 reasons · 4 rules · support · credits

Why it works

The browser measures the text itself, so the size is right on first paint, on paste and on window resize.
The textarea reaches its final height at once. Only the wrapper animates, and it clips the textarea until it catches up.
lh is one line at the element's own line-height. min-height: 3lh means three lines at any font size.

Rules

Bound it with min-height and max-height. A fixed height brings the fixed size back. Past max-height the textarea scrolls.
Put the border and background on the wrapper and leave the textarea bare. The box the user sees must be the one that animates.
Keep the wrapper content-box. The observer writes the textarea's full height, and a border-box wrapper would subtract its own border from it.
Write no fallback. A browser without field-sizing shows a fixed textarea that scrolls.

Support

Chrome: 123
Firefox: 152
Safari: 26.2

Baseline newly available since June 2026.

Credits

Borrowed from: Jhey Tompkins, @jh3yy on X, 2026-10-01

Docs: MDN: field-sizing · Adam Argyle, CSS field-sizing · MDN: ResizeObserver