A Modest Improvement to the Standard Textarea

I was staring at a bug report yesterday about a comment box that "felt claustrophobic" because the user had to scroll through six lines of text in a tiny, fixed-height box. I immediately started reaching for that one specific StackOverflow snippet involving scrollHeight and the input event—the same ritualistic code I’ve copied into projects for a decade. Then I remembered I didn't have to do that anymore.

The Ritual We’re Leaving Behind

For years, making a <textarea> grow with its content required a bit of JavaScript voodoo. You had to listen for an input change, briefly set the height to auto to shrink it (otherwise it would never get smaller), and then set the height to the scrollHeight.

It looked something like this:

// The "classic" hack
const textarea = document.querySelector('textarea');
textarea.addEventListener('input', () => {
  textarea.style.height = 'auto';
  textarea.style.height = textarea.scrollHeight + 'px';
});

It worked, mostly. But it always felt a little jittery, it didn't play nice with CSS transitions, and if you had a dozen textareas on a page, you were suddenly managing a fleet of event listeners just to make a box bigger. It’s a lot of engineering for something that feels like it should be a native browser behavior.

Enter field-sizing

The CSS Basic User Interface Module Level 4 (a mouthful, I know) introduced a property called field-sizing. It does exactly what it says on the tin: it tells the browser to size the form field based on the content inside it.

The "magic" line is this:

textarea {
  field-sizing: content;
}

That’s it. No JavaScript. No event listeners. No flickering height: auto resets. If you type a novel, the box grows. If you delete everything, it shrinks back down.

A Real-World Implementation

You probably don't want a textarea that starts as a tiny sliver or grows until it hits the floor of your page. You can still use your standard CSS tools to keep things sane.

.comment-box {
  field-sizing: content;
  
  /* Give it a sensible starting point */
  min-height: 3lh; 
  
  /* Stop it from breaking your layout */
  max-height: 400px;
  
  /* Optional: stop users from manually dragging it */
  resize: none;
  
  padding: 0.75rem;
  width: 100%;
}

I'm using 3lh (three line-heights) for the min-height here. It’s a great unit for this because it ensures the box is exactly three lines tall regardless of your font size.

The Reality Check

Now, for the part where I dampen the excitement just a little bit. As of late 2024, field-sizing is a "new" feature.

* Chromium (Chrome, Edge, Brave): It’s in. It works beautifully.
* Firefox & Safari: It’s currently behind flags or still in development.

What happens if the browser doesn't support it?
Absolutely nothing breaks. The browser just ignores the property and falls back to the default rows or height you’ve defined. It’s the definition of progressive enhancement. Your Chrome users get a sleek, modern experience, and your Safari users get a standard, scrollable textarea. They’ve been using those for 30 years; they’ll be fine for a few more months.

Why this matters

It’s easy to dismiss this as "just one less line of JS," but it's more about the web getting slightly more intuitive. We've spent years building complex workarounds for basic UI expectations.

When the browser takes over these responsibilities, we get better performance, better accessibility (the browser handles the layout shifts more gracefully), and less code to maintain. It's a small, quiet victory for anyone who just wants to build a simple form without pulling in a library.

The web is healing. Slowly, and one CSS property at a time.