Auto-Resize Textarea in CSS: field-sizing: content
Auto-growing textarea without JavaScript
Making a textarea grow as the user types required a JS event listener that reset height to auto then set it to scrollHeight on every keystroke. field-sizing: content makes the field size itself to its content.
textarea { overflow: hidden;}// JS: reset height then set to scrollHeight on every inputel.addEventListener('input', () => { el.style.height = 'auto'; el.style.height = el.scrollHeight + 'px'; });textarea { field-sizing: content; min-height: 3lh;}field sizing Browser Support
Since 2026 this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.
Works in all modern browsers. May need a fallback for older browsers.
Zero JavaScript
No oninput listener, no scrollHeight, no height reset trick. The browser handles the resize.
Works on inputs too
field-sizing: content works on single-line text inputs as well. The input grows with the typed value.
Min and max still work
Set min-height for the default empty size and max-height to cap growth. CSS handles the range.
How it works
Auto-growing textareas required JavaScript on every keystroke: first set height to auto so the element could shrink, then immediately set height to scrollHeight to match the content. One listener per textarea, causing a forced reflow on every keypress.
field-sizing: content tells the browser to size the field to fit its content instead of a fixed box. Use min-height to set the default empty state and max-height to cap how tall it can grow. No JavaScript, no event listeners, no scrollHeight.