CSS Solves Auto-Expanding Textareas (Probably, Eventually)

I’ll cut to the chase before I type too many more words:

textarea {
  field-sizing: content; /* used to be `form-sizing` but changed to this */
}Code language: CSS (css)

I came across it via an Amit Merchant blog post. Then followed the thread a little. It all started with a discussion, as these things tend to in this modern world. I think it’s a super weird name choice, but I’m sure if you were super involved in that discussion it would all make sense.

I was surprised to see it already in Chrome Canary with the “web experiments” flag enabled. Of course Adam is all over it:

So useful, good job CSS.

Who knows when that will be usable across all browsers, or if it will definitely ship just like that. I tend to agree with Lea Verou earlier in the discussion that height: max-content feels like a very elegant choice, but I’m not privy to why they didn’t go that way. Also like Lea, if this opens the door for horizontally growing single-line inputs, that’s a win.

My favorite trick of doing this before was using CSS grid. You’d take the text inside the textarea and propagate it to a hidden psuedo element overlaid exactly on top. That stack technique is a classic:

.grid {
  display: grid;
  grid: stack;
  > *, &::after {
    grid-area: stack;
  }
}Code language: CSS (css)

Credit to Stephen Shaw on the original idea for that.