July 17, 2026 in CSS

How to Create Auto-Expanding Textareas with CSS Only

We’ve all been there. You’re building a chat interface or a comment form, and you want that smooth, high-quality user experience where the text box grows as the user types—just like ChatGPT or iMessage.

For years, this simple feature was surprisingly painful to build. You had to wire up JavaScript event listeners to calculate scrollHeight and manually set heights. It was messy, prone to bugs, and felt like overkill for something so basic.

But that era is ending. With modern CSS, you can now create auto-expanding text areas without writing a single line of JavaScript.

The Magic Property: field-sizing

The new CSS property changing the game is field-sizing.

Historically, form inputs have had a “fixed” default size. They didn’t care about their content; they cared about their rows, cols, or height attributes. The field-sizing property allows you to override this behavior and tell the browser: “Size this element based on what’s inside it.”

How to use it

It is incredibly simple. You just apply field-sizing: content to your textarea.

textarea {
  field-sizing: content;
}

That’s it. Seriously.

When you add this property, the textarea acts like a div that grows to fit its text. As the user types, the box expands vertically. If they delete text, it shrinks back down.

A Robust Example

To make this look like a proper chat input (like ChatGPT), you usually want a few guardrails. You don’t want the box to grow infinitely and take up the whole screen, and you probably want a minimum height so it doesn’t look like a thin line when empty.

Here is the complete CSS snippet for a production-ready input:

.chat-input {
  /* The Magic */
  field-sizing: content;

  /* Guardrails */
  min-height: 40px;      /* Prevent it from being too small */
  max-height: 200px;     /* Stop it from taking over the screen */
  
  /* Aesthetics */
  width: 100%;
  padding: 12px;
  resize: none;          /* User shouldn't manually resize it */
  border-radius: 12px;
  border: 1px solid #ccc;
  font-family: inherit;
  line-height: 1.5;
}

With max-height set, the browser handles the overflow automatically. Once the user types enough to hit the 200px limit, the textarea stops growing and a scrollbar gracefully appears.

Browser Support (The “Catch”)

As of 2025, field-sizing is a modern feature.

• Supported: Chrome (v123+), Edge, and Opera.
• In Progress: Firefox and Safari.

Because this is a progressive enhancement, it is safe to use right now. Browsers that don’t support it will just ignore the property and render a standard, fixed-height textarea. The form will still work; it just won’t auto-expand for those specific users.

Summary

For the best balance of modern code and clean performance, use field-sizing: content on a standard <textarea>.