field-sizing 不是标准 css 属性，所有主流浏览器均不支持；textarea 高度需通过 javascript 动态设置 style.height = $ta.scrollheight + 'px'，并前置 style.height = 'auto' 清缓存，配合 min-height、max-height 和 resize: none 才能稳定实现自适应。
field-sizing 不是标准 CSS 属性，浏览器根本不支持。你在 Bootstrap 项目里写 field-sizing: content 或类似值，它会被完全忽略，不会产生任何效果。
这个说法可能源于对 resize、overflow 或实验性 CSS（如旧版 Firefox 的 -moz-field-sizing）的误传，但截至 2026 年 4 月，所有主流浏览器（Chrome、Firefox、Safari、Edge）均无 field-sizing 这一属性，MDN、CanIUse、W3C 规范里都查不到。
为什么不能靠 CSS 单独实现自适应高度？
textarea 是替换元素（replaced element），它的高度默认由 rows 属性或内联 height 控制，不响应 height: auto。你设 height: auto，它只会退回到浏览器默认的 2 行左右高度，不会随内容增长。
真正起作用的是 JavaScript + scrollHeight：
-
scrollHeight是唯一能准确反映“当前内容所需像素高度”的只读属性 - 它包含 padding、line-height、字体大小、换行逻辑等全部渲染影响
- 但必须配合
style.height = 'auto'先清缓存，再赋值，否则 iOS / IE11 / 快速删字时会卡住
正确做法：用 JS 绑定 input，不是幻想 field-sizing
const $ta = document.querySelector('textarea.form-control');
const adjust = () => {
$ta.style.height = 'auto';
$ta.style.height = $ta.scrollHeight + 'px';
};
<p>$ta.addEventListener('input', adjust);
adjust(); // 初始渲染后立即调用</p>
- 必须加
$ta.style.height = 'auto'这一行，否则删内容时高度不收缩 -
input事件覆盖粘贴、剪切、拖入、键盘输入，比keydown可靠得多 - Bootstrap 5 的
.form-control已设box-sizing: border-box，所以直接赋scrollHeight就行，不用手动减边框/内边距
容易被忽略的三个硬性配套项
-
min-height和max-height必须用 CSS 写死，例如：min-height: 3.5rem; max-height: 200px; -
resize: none要加上，否则用户拖拽会破坏自适应逻辑 - 父容器（比如
.col或.card-body）若设了overflow: hidden，得改成overflow: visible，不然拉伸后内容被裁掉
别被名字误导——field-sizing 听起来很“现代”，但它不存在。真正在生产环境跑得稳的，还是那十几行老实 JS。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
