The Long-Awaited CSS Magic Property: field-sizing for Auto‑Growing Textareas

The CSS field-sizing property has recently landed in the major browsers – Chrome 123, Safari 26.2 and Firefox 152 – meaning developers can finally rely on native sizing for form controls.

For years front‑end engineers have struggled with a textarea that stays a fixed height; once the content exceeds the container a scrollbar appears, forcing a JavaScript‑driven solution to resize the element on every input event.

Previous JavaScript solution

Typical code reset the height to auto, read scrollHeight, then assign that value back to the element:

textarea.addEventListener("input", () => {
  textarea.style.height = "auto";
  textarea.style.height = textarea.scrollHeight + "px";
});

While functional, this approach requires event listeners, DOM writes on each keystroke, and still leaves edge cases such as manual resizing.

Native CSS solution

With field-sizing: content the browser automatically computes the size needed to display the full content:

textarea {
  field-sizing: content;
}

The element grows when text is added and shrinks when text is removed – no JavaScript needed.

Placeholder handling

If the textarea is empty but has a placeholder, the browser uses the placeholder’s length to determine the initial size, ensuring the hint text is fully visible.

Effect on select elements

For a normal select, width is usually based on the longest option. With field-sizing: content, the width adapts to the currently selected option, and for a multi‑select (or a size greater than 1) the control expands enough to show all options.

Controlling growth with min-height and max-height

Developers can still limit the auto‑growth using the lh unit, which represents the element’s line height:

textarea {
  field-sizing: content;
  min-height: 3lh;   /* roughly three lines */
  max-height: 10lh;  /* stop growing after ten lines */
}

When the content exceeds ten lines, a scrollbar appears, preserving a tidy layout.

Resize caveat

By default a textarea is resizable via the resize property. If a user manually changes the size, the automatic field-sizing calculation may no longer behave as expected. The common practice is to disable manual resizing:

textarea {
  field-sizing: content;
  min-height: 3lh;
  max-height: 10lh;
  resize: none;
}

This final style gives the browser full responsibility for height, while CSS retains control over minimum and maximum limits, resulting in a clean, maintainable solution.