Skip to main content
PUBLIC.INTERNET
⚡ Acceso Inmediato🔒 Privacidad Primero🆓 Siempre Gratis📱 Funciona en Todos Lados

CSS field-sizing Auto-Grow Previewer

Auto-growing a textarea used to mean a JavaScript handler that measured scrollHeight on every keystroke, or a clever hidden mirror element duplicating your text. CSS field-sizing: content replaces all of it: the field sizes itself to its content, growing as the user types and shrinking when they delete, with no script at all. This tool lets you feel it before you adopt it. Type into the live textarea and watch it expand; toggle field-sizing off to compare with the old fixed-height, scroll-when-full behavior. Because an unbounded auto-grow field is rarely what you want, the previewer pairs it with the two properties that tame it: min-height sets the comfortable empty state so the box does not start as a single cramped line, and max-height caps the growth so a wall of pasted text scrolls instead of pushing your layout off the screen. An input is included too, since field-sizing also makes text inputs grow to fit their value. Copy the CSS when it behaves the way you want.

CSS

No JavaScript resize handlers, no hidden mirror element. One CSS property does it.
How to Auto-Grow Fields with field-sizing
  1. Toggle auto-grow - Leave field-sizing: content ticked to enable growth, or untick it to see the default fixed behavior.
  2. Set the empty state - Drag the min-height slider so the empty textarea starts at a comfortable height.
  3. Cap the growth - Drag the max-height slider; past this height the field scrolls instead of growing further.
  4. Type in the demo - Add and remove lines in the live textarea (and edit the input) to confirm the behavior feels right.
  5. Copy the CSS - Copy the generated rules for textarea and input into your stylesheet.
Why This Tool?
 Search results for auto-growing textareas are dominated by years of JavaScript workarounds and tutorials, which is exactly the problem field-sizing solves and the reason a live demo is worth more than another article. Seeing the field grow under your own typing, and flipping the property off to watch it revert to a scrollbar, makes the value obvious in a way a static snippet cannot. It also makes the gotcha clear: without min-height and max-height, an auto-sizing field starts too short and can grow without bound, so the tool foregrounds both. 
 The property is a clean progressive enhancement. In Chrome and Edge 123 and later it works as shown; in browsers that do not support it yet, fields simply behave the normal way, so there is no breakage and no need for feature detection in your CSS. This previewer runs an actual CSS.supports() check and tells you whether the demo reflects the real feature or is falling back, so you are never misled by your own browser. 
 For chat inputs, comment boxes, and any form where content length varies, this removes a whole category of fragile JavaScript. The previewer helps you set sensible bounds and ship one declaration instead of a resize library.