How to Make a Textarea Automatically Resize in One Line (No JavaScript)

The <textarea> element has always been useful to allow users to enter multiple lines of text.

However, one thing that has always annoyed me is the fact that the height of the textarea doesn’t automatically increase based on the amount of text the user enters.

There have been various solutions for this over the years using JavaScript, but it’s always been a bit of a hassle for such a simple thing.

Thankfully, CSS has saved the day by providing a simple solution that doesn’t require any JavaScript.

🥱 tl;dr: Add the field-sizingCSS property to the textarea element and set it to content.

textarea {
field-sizing: content;
}