Auto-grow needs a ceiling
Aliases: autosize textarea · unbounded grow · nested scrolling
What it is
Auto-grow lets a textarea deepen with its content so a second scrollbar does not appear inside the control. Without an auto-grow ceiling, the box shoves later labels, following fields, and the submit button out of the viewport, and the writer loses a sense of place on the page. The ceiling is the pixel or line at which growth stops and inner scrolling begins—not how tall the box should be at rest, and not whether a corner can be dragged.
Why it happens
Inner scrolling and page scrolling are two coordinate systems. Auto-grow exists to kill the inner one so the caret stays near the line being written. With no cap, every new line reflows everything after: submit drops, the footer vanishes, and a software keyboard then eats half the viewport, leaving a writer who cannot find “done.” On touch the problem is physical—the keyboard already owns the lower half, and an uncapped box turns the remainder into a slit. A ceiling turns unbounded layout into a bounded viewport: grow with the caret until the limit, then hand scrolling back to the control so the rest of the page stays put.
Where it stops holding
Chat composers, code blocks, and full-screen writing surfaces are the page, so the ceiling can be high, even the viewport. A notes field nested in a multi-field form cannot take the same liberty; it is one control among others. A pasted log will smash any reasonable cap in one shot and must switch to inner scrolling immediately, rather than jumping the page thousands of pixels. A ceiling that lands exactly over the next field’s label makes people think nothing follows. Per-keystroke reflow on low-end devices drops frames and feels like input lag.
Applying it
- Hard-cap auto-grow by pixels or rows—commonly about half the viewport or six to eight visible lines—then show an inner scrollbar.
- Keep submit and later field labels reachable by page scroll while the box grows; do not let the control hide the tail of the form.
- On a large paste, compute the final height once and clamp; do not expand the page line by line.
- Verify by opening the phone keyboard and pasting a long article. If submit is still reachable and the page is not an absurd empty shaft, the ceiling holds; if finishing requires a hunt, lower it.