New CSS Property - field-sizing: content

If you’ve ever battled with styling <input>, <textarea>, or <select> elements so they resize “just right,” you’ll appreciate field-sizing. This property allows these form controls to dynamically size themselves around their content (similar to the auto or “shrinkwrap” behavior we often wish inputs had by default).

Right now, field-sizing has limited availability in modern browsers. It was recently introduced as part of an experimental spec, so you’ll want to keep an eye on its evolution and check feature support before deploying it in production. But for hobby projects or proof-of-concept demos, it can already simplify form styling drastically.

What Is field-sizing?

The field-sizing property allows you to control how form elements (like text inputs, textareas, and selects) size themselves. By default, these elements have “preferred” sizes. Often, you’ve probably used attributes like size, rows, or cols to adjust them—or used fixed CSS widths. With field-sizing, you can directly override that behavior so these inputs can expand or shrink to fit their content.

There are two main values:

• content: The element automatically adjusts its size based on what’s typed or selected.
• fixed: Maintains a fixed default size (the usual browser behavior).

This property is currently experimental, so its browser support is limited. Check the compatibility table (for instance, at MDN) if you plan to use this in production.

Why Is It Helpful?

Let’s say you have a basic text input and a <textarea>. You can set them both to grow or shrink as a user types:

input, textarea {
  field-sizing: content;
  min-width: 50px;
  max-width: 300px;
}

• field-sizing: content tells the browser to let these fields grow or shrink based on the text.
• min-width and max-width give you guardrails to avoid overly tiny or huge elements.
• When you set a maxlength on an input, it’ll cap out once that limit is reached.

In practice, this replaces using something like:

input, textarea {
  width: auto; /* or a set width */
  /* plus additional JS or calculations to resize them */
}

You just add field-sizing: content and you’re done.

Example: Auto-Fitting select Elements

For dropdown menus or multi-select boxes, field-sizing: content can also auto-resize the <select> to fit the current option or display all options without scrolling in a multi-select. If you prefer a listbox that always shows all options without a scroll bar, this property makes it easy. Without it, you’d typically rely on the biggest option length or fixed pixel widths.

What It Replaces or Improves

field-sizing essentially replaces the need to manually:

• Use the size or rows/cols attributes to guess how big an input should be.
• Rely heavily on JavaScript or min/max width overrides for auto-resizing.
• Set a fixed width with CSS, then watch as user input flows out of sight or triggers scrollbars in unexpected ways.

Now, you can let the browser do the heavy lifting for you—while still imposing minimum and maximum constraints to keep things neat.

PS. If you liked this article, please share to spread the word.