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
This feature is not Baseline because it does not work in some of the most widely-used browsers.
Not ready for production without a fallback.
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.