The Death of the Scrollbar: Why field-sizing is Your New Best Friend

Grab a coffee, friend, because I’m about to show you something that would have saved us literally thousands of lines of fragile JavaScript back in the day. You know that classic UI problem? A user starts typing a comment, the text hits the edge of the textarea, and suddenly… an ugly, cramped scrollbar appears. To fix it, we’ve been jumping through hoops for a decade just to make a simple input field grow with its content. Well, the CSS WG finally gave us the “magic button.” It’s called field-sizing, and it’s honestly one of the most underrated quality-of-life improvements in modern CSS.

How we suffered before (The “Hacker” Era)

Back in the day, if you wanted a textarea to expand as the user typed, you had two choices, and both were pretty terrible. The first was the JavaScript approach: you’d attach an input event listener, grab the scrollHeight, and manually update the element’s height in pixels. It was jittery, often felt a frame behind, and was a nightmare to manage with padding and box-sizing.

The second was the “Invisible Twin” hack. You’d create a hidden div that mirrored the styles of your textarea, put the same text inside it, and let that div’s height push the container, while the textarea sat on top of it with position: absolute. We had to use things like Creating Adaptive Typography with the clamp() Function just to ensure the text didn’t look like a mess across different screen sizes while these hacks were running. It worked, but it felt like building a house out of duct tape and prayers.

The modern way in 2026

Fast forward to today, and we can throw all that complexity in the trash. The field-sizing property allows an element to size itself based on its content, much like a div or a span does naturally. By default, form elements have a “fixed” size (the field-sizing: fixed default), which is why they don’t grow. By switching this to content, the browser takes over the heavy lifting.

This works beautifully for textarea, input, and even select elements. When combined with Advanced Use of the :has() Pseudo-Class for Creating UI Logic, you can create incredibly reactive forms that feel organic and fluid without a single line of JS for layout calculations.

Ready-to-use code snippet

Here is the cleanest way to implement an auto-expanding textarea. No magic numbers, no observers—just pure CSS.

/* The magic happens here */
.auto-expanding-textarea {
  field-sizing: content;
  
  /* Set a minimum height so it doesn't look like a tiny slit */
  min-height: 3lh; 
  
  /* Optional: stop it from growing forever */
  max-height: 400px;
  
  /* Modern styling basics */
  width: 100%;
  padding: 0.8rem;
  border: 1px solid #ccc;
  border-radius: 8px;
  resize: none; /* You don't need the manual resize handle anymore! */
}

/* Works on inputs too! */
.expanding-input {
  field-sizing: content;
  min-width: 150px;
  max-width: 100%;
}

Common beginner mistake: Forgetting the Limits

The biggest trap developers fall into when they first discover field-sizing: content is forgetting about constraints. If you give a user a textarea that grows infinitely, they might type a novel and push your “Submit” button three miles down the page.

Always pair field-sizing: content with max-height (for textareas) or max-width (for inputs). When the element hits that maximum limit, it will gracefully fall back to showing a scrollbar, just like we’re used to. Also, keep an eye on your min-height; a textarea with no content and no min-height using field-sizing: content will collapse into a tiny, almost invisible line. Use the lh (line-height) unit to ensure it always looks like a proper input field!

🔥 We publish more advanced CSS tricks, ready-to-use snippets, and tutorials in our Telegram channel. Subscribe so you don’t miss out!