CSS Easy Automatic field-sizing

Remember when sizing input fields was like trying to predict the weather? You'd take a wild guess or go all-in with JavaScript to make those fields grow with the content. Well, guess what? There's a new CSS feature in town, named field-sizing: content.

This lovely little property is about to make your life way easier. With just one line of CSS, you can tell your text areas, selects, and input fields to size themselves based on what the user types. How cool is that?

Check it out:

textarea {
  field-sizing: content;
}

Boom! That's it. Your form elements will now expand or shrink to fit their content like magic. No more cut-off text or unnecessary scrollbars!

Before you go wild with field-sizing, there's a catch. It's currently only available on the latest versions of Chrome and Edge. So, while it's super exciting, we can't throw a party just yet. Keep an eye out for more browser support in the future!

Want to see it in action? Here's a little CodePen snippet to get you started:

And here's the article that I originally read announcing the feature in Chrome that has much more details.