Credit to Stephen Shaw for the original idea, there is a decently easy way to make an auto-sizing <textarea> element. It is here. But it’s not perfect. There is a frustrating hard-to-replicate iOS bug. Plus it’s just a trick. It requires JavaScript and some pretty specific CSS to pull off.
It’s awesome to see the web platform pick up an easy one-liner way to do this, by way of a new CSS property:
textarea {
field-sizing: content;
}Code language: CSS (css)Adam Argyle has a simple demo here to play with (note how the field-sizing can apply to inline size as well as block size). As I write, Chrome Canary has it in v122, and should go out in stable in late February. Let’s 🙏 for quick cross-browser support.
At one time when this was being played with, the CSS property was called form-sizing, but I think I like the update to field-sizing. I think of these things as “fields”, and quite notably it works on <input> as well as <textarea>. Fork Adam’s demo and have it apply to an input instead to see it work (in Chrome Canary).
