Auto-Expand Inputs with CSS field-sizing: content

The CSS field-sizing property provides a native, JavaScript-free way to make form controls automatically adjust their dimensions based on their content. By setting field-sizing: content, elements like text inputs, textareas, and select dropdowns dynamically grow or shrink as users type or change values. This article explains how the property works, how to implement it, and how to control its expansion using standard CSS constraints.

The Traditional Problem

Historically, HTML form controls such as <input> and <textarea> have default fixed sizes determined by the browser's user-agent stylesheet or explicit attributes like size, rows, and cols. To make an input grow wider as a user types, or to make a textarea expand vertically to avoid scrollbars, developers had to rely on JavaScript. These workarounds typically involved listening to the input event, reading scrollHeight or scrollWidth, and manually recalculating inline styles, which introduced layout shifts and performance overhead.

How field-sizing: content Works

The field-sizing property changes how the browser calculates the intrinsic sizing of form controls. It accepts two primary values:

• fixed (default): The element retains its default or explicitly defined width and height, ignoring the size of the text entered inside it.
• content: The element sizes itself according to the content it contains, expanding or shrinking automatically as the content changes.

When applied to an <input type="text">, the browser evaluates the width of the rendered text string (or placeholder) and adjusts the input's width to match. When applied to a <textarea>, the element expands vertically as new lines of text are entered, eliminating internal scrollbars until reaching specified bounds. It also applies to <select> elements, sizing the control to match the length of the currently selected <option>.

Basic Implementation

To enable auto-expansion, target the desired form elements and set the property:

input,
textarea,
select {
  field-sizing: content;
}

With this single declaration, the browser automatically handles recalculating the element's box model whenever the value changes.

Controlling Expansion with Constraints

Without limits, an auto-expanding input can disrupt page layouts by growing infinitely or collapsing too small when empty. To prevent this, combine field-sizing: content with standard min/max dimension properties:

textarea {
  field-sizing: content;
  min-height: 4lh; /* Keeps a minimum of 4 lines visible */
  max-height: 15lh; /* Stops growing at 15 lines and shows a scrollbar */
  width: 100%;
  max-width: 600px;
}

input[type="text"] {
  field-sizing: content;
  min-width: 10ch; /* Minimum width of roughly 10 characters */
  max-width: 100%; /* Prevents overflowing the parent container */
}

Using line-height units (lh) for vertical sizing and character units (ch) for horizontal sizing provides predictable boundaries relative to the element's typography.

Browser Support and Progressive Enhancement

field-sizing is supported in Chromium-based browsers (Chrome, Edge) starting from version 123. Because it is a purely visual enhancement, it works cleanly as progressive enhancement. Browsers that do not yet support the property will safely ignore it and fall back to standard fixed dimensions without breaking form functionality.