textarea无法用field-sizing: content自动增长，该属性未被任何主流浏览器支持；必须用js监听input/composition事件，结合scrollheight与height: auto动态调整高度。
field-sizing: content 在当前（2026年5月）无法让 textarea 随内容自动增长——它不是有效标准属性，所有主流浏览器（Chrome、Firefox、Safari）均不支持该写法，写了也完全无效。
你看到的“生效”示例，基本来自三类混淆：旧版私有前缀（如已废弃的 -webkit-field-sizing）、UI 框架的 props 误标为原生 CSS、或引用了从未被实现的编辑器草稿（CSS Basic UI Module Level 4）。你可以当场验证：getComputedStyle(document.querySelector('textarea')).fieldSizing 返回空字符串；MDN 和 CanIUse 上查不到该属性；Chrome 最新稳定版（125+）也仅对 input[type="number"] 等极少数控件实验性支持 field-sizing，且 content 不在其合法取值中。
textarea 高度自适应必须靠 JS + CSS 协同实现
-
height: auto单独设置无效，它不是触发器，只是 JS 动态重设高度前的必要重置步骤 -
scrollHeight是唯一能准确反映“填满内容所需最小高度”的只读属性（含 padding，不含 border/外边距） - 必须显式声明
box-sizing: border-box，否则 padding/border 会额外叠加，导致撑高过度 -
min-height和max-height必须用 CSS 显式设置，否则空值时塌缩、长内容时页面崩开 -
overflow: hidden必须加，同时禁用resize: vertical，否则用户拖拽会破坏 JS 控制逻辑
iOS Safari 是最大兼容性陷阱
- 中文输入法候选阶段，
input事件已触发但scrollHeight还没更新，需监听compositionstart/compositionend做状态标记 - 键盘弹出时
visualViewport尺寸突变，scrollHeight计算失准，必须监听resize事件兜底重算 - 初始渲染时
scrollHeight可能偏小（尤其字体未加载完），可加requestAnimationFrame或微任务延迟读取 - 父容器若设了
overflow: hidden或transform，会截断滚动计算范围，导致高度严重偏低
一个最小可行 JS 实现（带防抖与空值处理）
function resizeTextarea(el) {
el.style.height = 'auto';
const height = el.scrollHeight;
el.style.height = Math.max(
parseFloat(getComputedStyle(el).minHeight) || 0,
height
) + 'px';
}
<p>const textarea = document.querySelector('textarea');
textarea.addEventListener('input', () => resizeTextarea(textarea));
textarea.addEventListener('compositionstart', () => textarea.dataset.composing = 'true');
textarea.addEventListener('compositionend', () => {
textarea.dataset.composing = 'false';
resizeTextarea(textarea);
});
window.addEventListener('resize', () => resizeTextarea(textarea));</p>
真正容易被忽略的点是：这不是“设置一次就完事”的样式问题，而是一个持续响应输入、输入法、视口、字体加载等多变量的状态同步过程。 任何试图用单行 CSS 规避 JS 的方案，在生产环境里都会在 iOS 上突然失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
