A textarea that resizes to its content, in one CSS declaration, replacing a script that had been copied between projects since 2016.
textarea {
field-sizing: content;
min-height: 4lh;
max-height: 20lh;
}
/* what it replaces: an input listener that sets
style.height to scrollHeight, which forces a layout
on every keystroke and gets the box model wrong
whenever the padding changes. */
The lh unit is what makes the bounds sensible — a minimum of four lines is a design decision and a minimum of 96 pixels is a coincidence. Support is not universal and the degradation is a fixed-height textarea with a resize handle, which is what everybody had before and needs no fallback code.