Autogrow

Autogrow is the automatic resizing of a user interface element to fit its content. It most often refers to textareas that expand vertically as users type, so all text remains visible without internal scrollbars. It can also apply to other multi-line inputs or contenteditable regions.

Implementation typically measures the element’s scrollHeight and adjusts its height to match. A common approach resets the height to a minimal value and then sets it to scrollHeight, optionally adding padding or borders. Developers may specify minimum or maximum heights and may disallow manual resizing via CSS for consistency across layouts.

Use cases include chat boxes, comment fields, note inputs, and forms where large or varying content should be visible without scrolling. Autogrow can improve readability and reduce user effort, but can complicate layout when many controls resize at once or when content length varies dramatically across elements.

Considerations include cross-browser quirks, correct box-sizing, and performance for elements with very long content. Accessibility should be preserved, ensuring focus and cursor position remain intuitive and that users who rely on assistive technologies are not disrupted. Some frameworks provide built-in autosize components or libraries to simplify implementation.

Related terms include auto-resize, autosize, and textarea autosize libraries; autosize.js is a common example in web development.