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.
2 field-sizing: content;
3 min-height: 3lh;
4}
2// JS: reset height then set to scrollHeight on every input
3el.addEventListener('input', () => {
4 el.style.height = 'auto';
5 el.style.height = el.scrollHeight + 'px';
6});
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.
Your first month is free
Managed WordPress hosting for faster sites.
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.