Basic Line-Based Automatic Sizing With Optional Constraints

Automatically expand and contract the height of a <textarea> element to ensure no scrolling is required, optionally constrained to configured upper and/or lower bounds. This particular technique requires that text within the <textarea> not wrap, usually by combining overflow-x: auto or overflow-x: scroll with white-space: nowrap.

Pro: Dirt simple. The controller implementation is two lines of ES6 if you don't require constraints.

Pro: Exploits existing user-agent behavior, as <textarea> already offers a rows attribute for line-based sizing.

Con: Does not handle soft-wrapped input text.

Con: Impossible to animate.

Con: View constraints encoded as data atribtes within the model.

Unconstrained

Minimum & Maximum