配了三年表单，每次想让 textarea 自己长大都要靠 JS 算 scrollHeight——今天一个 CSS 属性把它彻底原生化了

做过表单开发的都知道 textarea 有多烦人：用户一打字，内容多了就溢出了，滚动条出来了，体验很差。最直接的办法就是写一段 JS，监听 input 事件，每次把高度重置为 auto，再设成 scrollHeight，让它跟着内容走。这段逻辑 7 行，react-textarea-autosize 每周还有三百万次下载量，说明这个问题确实困扰了大家很久。

今天这件事被 CSS 一个属性彻底原生化了：field-sizing: content。

这个属性怎么用

textarea {
field-sizing: content;
min-height: 3lh;
max-height: 10lh;
resize: none;
}

就这一行，不需要 JS，不需要监听，不需要每次重排。它的工作原理很简单：浏览器自己会测量内容尺寸，然后把表单控件调整到刚好容纳内容的大小。增减内容，高度跟着自动走。

min-height 和 max-height 配合 lh 单位（按行高计算）设置上下限，lh 本身就是相对当前元素的行高，所以不会产生字號不匹配的问题。resize: none 禁止手动拖拽，因为手动改了尺寸之后浏览器的自动计算会失效。

如果还需要兼容还不支持 field-sizing 的浏览器，用 @supports 做渐进增强即可：

textarea {
field-sizing: content;
min-height: 3lh;
max-height: 10lh;
resize: none;
}

@supports not (field-sizing: content) {
/ 保留 JS fallback 逻辑 /
}

不支持的浏览器会忽略 field-sizing 属性，正常渲染固定高度的 textarea，渐进增强，不破坏任何功能。

field-sizing 支持哪些控件

不只是 textarea。表单控件全家桶都可以：

• textarea：高度随内容自动伸缩，最直接受益场景
• input[type=text]、input[type=email]、input[type=number]：宽度随输入内容增长，适合标签编辑器或内联编辑字段
• select：宽度适配当前选中项，而非列表中最宽的选项
• input[type=file]：按钮宽度加上文件名文本的宽度

input 宽度自增长的场景以前几乎没人做，因为没有简单方案。现在 field-sizing 一行就覆盖了，设计空间一下子大了很多。

浏览器支持情况

• Chrome/Edge：v123，2024 年 3 月
• Safari（macOS + iOS）：v26.2，2025 年 12 月
• Firefox：v152，2026 年 6 月

Firefox 152 发布后，这个属性正式进入 Baseline Newly Available 状态——三大引擎全部支持。caniuse 数据显示全球覆盖率约 84%，而且还在增长。

之前 MDN 标注 Limited availability 正是因为 Firefox 缺席，开发者不敢上生产。现在这个顾虑没有了。

三个坑

1. 无上限增长

没有 max-height，长文本粘贴会把整个页面顶下去。必须设 max-height 加 overflow-y: auto，这是标准防护写法：

textarea {
field-sizing: content;
min-height: 3lh;
max-height: 10lh;
resize: none;
overflow-y: auto;
}

2. placeholder 算内容

空 textarea 如果有 placeholder，浏览器会用 placeholder 的长度决定初始尺寸。这个行为大多数时候是合理的，但如果你写了一个超长的提示文字，初始高度会出乎意料地大。

3. rows/cols 属性失效

field-sizing: content 激活后，HTML 的 rows 和 cols 属性对尺寸不再起作用。需要用 min-height/max-height 和 min-width/max-width 替代，这是一次性的迁移成本。

下一步

如果你的项目里还有 textarea 的 auto-resize JS 逻辑，可以分三步迁移：

第一步：加上 field-sizing: content，观察现代浏览器下的表现，确认行为一致。

第二步：用 @supports 包裹，给不支持的浏览器保留 JS fallback，灰度上线。

第三步：等不支持的浏览器占比低于你的容忍阈值后，删除 JS 逻辑，整个优化路径零技术债。

React 生态里 react-textarea-autosize 的下载量还在每周三百万次，说明这个需求长期存在。现在 CSS 接管了，不需要为此多装一个依赖。