Menu

1 / 5

CSS field-sizing: inputs that grow as you type

DEV Community: css·richi.codes·about 13 hours ago
#vdQg8hqo
#devtocss#devto#dev#field#size
Reading 0:00
15s threshold

This note has an interactive demo. Try it in the original

A textarea that grows as you type used to need a script that measured scrollHeight on every keystroke. Now it takes one line of CSS: field-sizing: content . With Firefox 152 shipping it on June 16, 2026, the property is Baseline, so it works in Chrome, Edge, Firefox and Safari.

Type in the demo above, or press "Type it for me": the blanks in the sentence widen with every letter, the dropdown shrinks to the option you picked, and the chat box gains a line at a time until it hits its limit. Flip the switch to fixed and you get the old behaviour back on the same markup.

What it is and why it matters

Form controls have always had a size that ignores what's inside them. An <input> is just as wide whether it holds "Al" or a full street address, a <textarea> is however many rows and cols it gets, and a <select> is as wide as its longest option.…

Continue reading — create a free account

Join HashtagPLUS to read full articles, follow hashtags, vote, and join the conversation.