field-sizing

What the values mean

• fixed: the initial value. The size is set by the browser, whatever the amount of text. You can change it with the size attribute of an input or the rows and cols attributes of a textarea.
• content: the size fits the text inside. An input becomes as wide as the typed text, and a textarea fits the width of its longest line and its number of lines.

The preview sets it on the input under the label (the second child). With content it shrinks to the width of the name, and its width changes as you type or delete text. With fixed it keeps the same width whatever the amount of text. The input also has max-width: 100%, so it never grows wider than the box.

When to use it

Use it to make a chat or comment textarea grow taller with each line written. What used to need JavaScript to calculate the height takes only CSS.

Watch out

• When empty, it is only as wide as the text cursor, so it is barely visible. Set a minimum with min-width and a limit with max-width so it does not grow too wide.
• When empty with a placeholder, it is as wide as the placeholder text.
• width and height take priority. Give a textarea a width and it keeps that width and only grows taller with the number of wrapped lines.
• With content, the size, rows, and cols attributes no longer affect the size.
• In Chrome, setting it on a select makes it as wide as the selected option.
• Supported from Chrome and Edge 123, Firefox 152, and Safari 26.2. Older browsers ignore it and keep the fixed size.