CSS Field Sizing

field-sizing: content lets form controls size themselves to their contents, replacing a common JavaScript textarea autoresize pattern when browser support is acceptable.

What It Does

field-sizing changes how default-sized form controls calculate their preferred size. With field-sizing: content, text inputs, selects, file inputs, and textareas can shrinkwrap or grow around their current content instead of staying at a fixed preferred size. The practical high-value case is a textarea that grows as the user types without input listeners, scrollHeight reads, or inline height mutation. Source: MDN, 2026-06-30

textarea {
  field-sizing: content;
}

MDN marks the feature as Baseline 2026, Newly available since June 2026, supported by current Chrome/Edge, Firefox, and Safari versions. Treat it as a progressive enhancement for now: older browsers may still need the old JavaScript fallback or a fixed min-height/max-height layout. Source: MDN, 2026-06-30

Implementation Guidance

  • Use it for autosizing comment boxes, chat composers, notes, and prompt inputs where the desired behavior is "fit the entered content."
  • Pair it with explicit min-block-size and max-block-size so long text does not swallow the page.
  • Keep resize policy intentional. field-sizing: content changes intrinsic sizing; it does not decide whether users should be allowed to manually resize.
  • Test constrained widths. Textareas grow in height when they cannot grow wider, and can still show scrollbars after a height cap.
  • Do not remove existing JavaScript autosize until the target browser matrix is verified.

Source Artifact Read

The reviewed bookmark image contrasts a fixed textarea whose content overflows with a field-sizing: content textarea that expands to fit the message. The image is conceptually accurate but not a browser-compatibility source; MDN is the version/support authority. Source: local X image artifact, 2026-06-30


Timeline