Field-sizing just works!
This title could be clearer and more informative.Try out Clickbait Shieldfor free (5 uses left this month).
The new CSS `field-sizing` property allows `input`, `textarea`, and `select` elements to automatically scale to their content size without JavaScript. The post walks through the evolution of auto-sizing techniques: first using React libraries like `react-input-autosize` (full JS approach), then a CSS grid trick using a `::after` pseudo-element to mirror content (semi-JS approach), and finally the clean CSS-only `field-sizing: content` solution. Currently Chromium-only (Chrome 120+ with flags, or 123 stable), with positive signals from Safari and Firefox. Practical notes include setting `min-width`/`max-width` boundaries to prevent unbounded growth.
