Windows Errors? Fix Them Before They Spread
Repair common Windows errors and clear accumulated junk for a smoother, more stable PC - no reinstall needed.Free scan · no reinstallCrashes, No Sound, or Screen Glitches?
Random freezes, missing sound and display glitches usually trace back to one bad driver. Find and replace yours safely.Free scan · under a minuteCSS field-sizing: content lets a form control size itself to what it contains. A textarea can grow as someone types, and an input can widen to fit its value, without a JavaScript listener that remeasures the element on every keystroke. The property is useful, but it has real limits: it is newer than many developers assume, support depends on browser version, and it does not replace every custom form-control script.
What field-sizing changes
The field-sizing property controls how a form control chooses its preferred size. It accepts two values:
As an Amazon Associate I earn from qualifying purchases.
- fixed is the default. The control keeps its normal intrinsic size, which is how form controls have always behaved.
- content tells the browser to size the control from its contents, so the element responds as text is entered or selected.
The property applies to form controls, not to ordinary div or p elements. That distinction matters: it removes the need for a sizing script only where the browser’s built-in control behavior is the thing you want.
The JavaScript approach it replaces
Muhammad Usman, author of a DEV Community article on this property, describes the older workaround in the terms most developers will recognize. In the article’s own words: “I used to fix this with a JavaScript resize listener. Now field-sizing: content do it in one line.” The typical listener does the following on every input event:
#1 Best Overall
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
- Reset the textarea’s height to
auto. This step is necessary so the element can shrink after text is deleted; without it, the height only ever increases. - Read the element’s
scrollHeight, which reports the height its content needs. - Assign that measurement back to the element’s height.
That approach works and is widely understood. What field-sizing offers is a declarative alternative: the browser performs the measurement, and the stylesheet states the intent. The article does not benchmark the two methods, so any claim about speed or maintenance savings would go beyond what is shown here.
A minimal example
The smallest useful version is a single declaration on the element you want to grow:
textarea {
field-sizing: content;
min-height: 3lh;
max-height: 10lh;
}The lh unit is the element’s computed line height, so 3lh and 10lh bound the textarea to roughly three to ten lines. These values are illustrative, not required. Without a maximum, the textarea keeps growing with its content and can push the rest of the page down.
Free tools Windows power users keep installed
One-click scans. No signup required.
Inputs follow the same pattern. MDN’s examples constrain width with min-width and max-width:
Rank #3
- Brand: Wiley
- Set of 2 Volumes
- A handy two-book set that uniquely combines related technologies Highly visual format and accessible language makes these books highly effective learning tools Perfect for beginning web designers and front-end developers
input {
field-sizing: content;
min-width: 8ch;
max-width: 100%;
}How each control behaves
The property is not identical across controls. The table below summarizes what the reference material documents, along with what to check before relying on a given behavior.
| Control | What content sizing does | What to check |
|---|---|---|
| textarea | Grows in height as text is added and shrinks when text is removed | Set a maximum height; see the manual resize note below |
| Text-accepting input types | Width follows the entered value. An empty field can be sized by its placeholder text | Set a minimum width so empty fields stay usable |
| select | Fits the currently selected option | Confirm the width is acceptable when options change |
| select shown as a listbox | Can show all of its options | Check how long lists scroll in your target browsers |
| File input | Included among the controls that support the property | Specific sizing behavior is not described in detail in the cited material; test it directly |
Constraints and overflow
Content-driven sizing needs boundaries. Three rules keep it predictable:
- Use min and max values, not fixed sizes. A fixed
widthorheighton the same element can override the effect. MDN advises setting minimum and maximum constraints to bound growth instead. - Give the control a usable minimum. Without
min-widthormin-height, an empty control can look broken in a layout. - Expect scrolling at the limit. When content reaches the available space or an explicit maximum, the control scrolls. Users will need to scroll to see the rest, so the maximum should be large enough for typical input.
The manual resize caveat
The article points out that a textarea the user can drag to resize may stop responding to field-sizing in the way the author expects. Its suggested remedy is to disable manual resizing when automatic sizing is the goal, which is done with resize: none. This is the author’s observation, not a result from independent testing, so confirm the interaction in the browsers you support and in your real form layout before removing the drag handle from a shipped design.
Browser support and fallbacks
MDN labels field-sizing as Baseline 2026. As of the MDN page last modified July 26, 2026, it has been newly available since June 2026 across the latest devices and browser versions. Older browsers and devices may not support it, so the label is not a promise for every visitor.
Best Value
The safest pattern is progressive enhancement. Apply the declaration inside a feature query, and keep the existing script only as a fallback:
@supports (field-sizing: content) {
textarea {
field-sizing: content;
}
}Pair the query with the JavaScript listener, and run that listener only when the browser does not support the property. Checking your own analytics for the share of older browsers is the most reliable way to decide how long the fallback is worth keeping.
When to use CSS and when to keep JavaScript
- Use
field-sizing: contentwhen a textarea or input only needs to grow or shrink with its value, your browser targets include versions that support it, and you can set sensible min and max limits. - Keep the JavaScript routine when you must support older browsers without a fallback you are comfortable with, or when you need custom behavior the property does not provide, such as special sizing rules tied to other application state.
- Combine both when the declarative version handles most visitors and a script covers the remainder, using the feature query above to switch between them.
The property removes one common reason to write a resize listener. It does not remove the need to design constraints, test manual resizing, or decide what older browsers should receive.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
