Free tools Windows power users keep installed
One-click scans. No signup required.
iTechGuides is reader-supported. When you buy through links on our site, we may earn an affiliate commission. As an Amazon Associate I earn from qualifying purchases. Learn more
field-sizing: content lets form controls size themselves to what they contain, so a textarea can grow as someone types without a script that resets its height and measures it on every input event. It is a declarative replacement for a common JavaScript pattern, but it is only a good swap when your target browsers support it and your layout can accept the size limits described below.
What the property changes
By default, form controls use fixed preferred sizes. The field-sizing property changes that default. The value fixed keeps the default behavior, while content tells the browser to base the control’s size on its contents. The effect is limited to sizing; it does not change how the control accepts input, validates it, or submits it.
Which controls respond
The behavior is not identical across every control type. The table below lists what the specification’s documented examples describe for each control, and where a detail is not stated, the table says so rather than guessing.
Recommended Free Tools
| Control | How field-sizing: content affects it |
Practical note |
|---|---|---|
Text-accepting input types |
Width follows the entered text. | When the input is empty, its placeholder can influence the size. |
textarea |
Height grows with the entered text. | Growth stops at a max-height if you set one; after that the content scrolls. |
select (dropdown) |
The control can fit its selected option. | Changing the selection changes the control’s width. |
select as a listbox |
The control can show all of its options. | Long option lists can make the control tall, so pair it with a maximum height. |
input type="file" |
Listed among the supported controls. | The sizing detail for file inputs is not stated in the sources this article draws on; check it in your target browsers. |
A minimal example
This rule makes a textarea start at three lines, grow with its text, and stop at ten lines:
#1 Best Overall
textarea {
field-sizing: content;
min-height: 3lh;
max-height: 10lh;
}The lh unit is the element’s computed line height, so 3lh and 10lh scale with the font and line spacing rather than with fixed pixel values. The numbers are illustrative. Choose values that suit your form’s design. MDN’s own example uses min-width and max-width on inputs and textareas, which shows the same idea applied horizontally.
Keep controls usable inside a layout
A content-driven control needs boundaries, or it can take over the page. Use these properties deliberately:
Rank #2
- Minimums (
min-width,min-height) keep an empty control from collapsing to an unusable size. - Maximums (
max-width,max-height) cap growth. Once the cap is reached, the rest of the content is reached by scrolling inside the control. - Avoid fixed
widthorheightwhen you expect content-driven sizing. A fixed declaration overrides the effect, so the control will not respond to its contents.
Replacing the JavaScript resize listener
The usual script-based approach to a self-growing textarea follows a fixed sequence. In the DEV Community article that inspired this topic, the author describes it this way:
- Listen for
inputevents on the textarea. - Reset the textarea’s height to
auto, so it can shrink after text is deleted. - Read its
scrollHeight. - Assign that measurement back to the element’s height.
The reset step is the reason the script exists: without it, a textarea would never get shorter after content is removed. field-sizing: content removes the need to write that loop, because the browser performs the sizing. The author’s summary was: “I used to fix this with a JavaScript resize listener. Now field-sizing: content do it in one line.” That is a fair description of the code change; the article does not present a benchmark, so do not expect a performance claim from it.
One interaction needs attention. According to the same author, a textarea that a user has manually resized with the drag handle can stop responding to field-sizing. If automatic sizing is the goal, consider turning manual resizing off for that element with resize: none. This is the author’s report, not something verified independently for this article, so confirm it in the browsers and layouts you support.
Browser support and project targets
MDN marks field-sizing as Baseline 2026 and says it has worked across the latest devices and browser versions since June 2026. The MDN page was last modified on July 26, 2026. Older browser and device versions may not support it, so the property is not a guarantee across every browser your users might run.
Before adopting it, check your project’s actual browser targets, such as the browser list in your build configuration or your analytics, and look up current compatibility data for those versions. Do not rely on a version number from a secondary article, because support tables change.
When to use CSS and when to keep the script
Choose the declarative property when:
- Your supported browsers include the versions where it works, or you can accept a fallback for the rest.
- The behavior you want is growth with content, bounded by min and max limits.
- Users do not need to drag-resize the control, or you are willing to disable that resize handle.
Keep a script when:
- Your audience includes browsers that lack support and a non-growing fallback is unacceptable.
- You need custom logic, such as responding to the measured height, animating changes, or coordinating with other elements on the page.
- The control must keep its manual resize behavior while also growing automatically.
If you keep a script for older browsers, you can often feature-detect the property in CSS and apply the script only where needed, rather than running it everywhere.
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.
