CSS field-sizing Property Lets Text Areas Auto-Resize Without JavaScript

A new CSS property called field-sizing: content is now supported across all major browsers, having landed in Chrome 123, Safari 26.2, and Firefox 152. The property allows form elements like text areas and text inputs to automatically grow or shrink based on their content, eliminating the need for JavaScript workarounds. Previously, developers had to use resize event listeners and manually calculate scroll height to achieve the same dynamic resizing effect. The property also works on select elements, number inputs, and search inputs, and respects placeholder text when sizing empty fields. Developers can pair it with min-height and max-height values — using units like lh for line height — to control the sizing range of the element.
This is an AI-generated summary. ShortSingh links to the original source for the complete article.


Discussion (0)
Log in to join the discussion and vote.
Log in