field-sizing: content 是唯一纯 CSS 实现“输入即变高”的方案，仅支持现代浏览器的 textarea、input（非 number/date）、select，需搭配 min-height（如 3lh）和 max-height（如 200px）并设 resize: vertical；旧浏览器需 JS fallback 检测 'fieldSizing' in style。
field-sizing: content 是当前唯一能纯 CSS 实现“输入即变高”的原生方案，但仅限现代浏览器（Chrome 127+、Safari 17.4+、Firefox 126+），且必须搭配 min-height 和 max-height 才可用。旧版浏览器或需兼容 IE/Edge 18- 的项目，field-sizing 直接被忽略，退化为固定高度——这不是 bug，是规范行为。
field-sizing: content 能用在哪些元素上
目前只支持 textarea、input（含 type="text"、type="search" 等）、select。不支持 div[contenteditable] 或自定义元素。注意：input[type="number"] 和 input[type="date"] 虽然语法合法，但实际表现不稳定，部分浏览器会无视 field-sizing 并回退到 fixed 行为。
常见错误现象：input 设了 field-sizing: content 却没反应，大概率是用了不被支持的 type，或父容器有 display: grid + align-items: stretch 强制拉伸，覆盖了内容驱动逻辑。
为什么只写 field-sizing 不够，必须配 min-height
field-sizing: content 不提供“基础尺寸”，它只接管尺寸计算逻辑。空值状态下，浏览器按最小渲染单位（如一行文字的行高）撑开，但这个值不可控：Safari 可能缩成 16px，Chrome 可能是 20px，用户根本找不到光标。
必须显式设置 min-height，推荐用相对单位：
-
min-height: 3lh—— 最稳，随字体大小缩放，3 行高度刚好容纳 placeholder 和首行输入 -
min-height: 48px—— 若项目强制用固定像素，需确保大于line-height × 2 + padding × 2 + border-width × 2 - 禁用
min-height: 0或min-height: auto，后者在 Safari 中等效于未设置
max-height 和 resize: none 的协同关系
max-height 不是可选项，是防崩底线。用户粘贴 5000 字时，field-sizing 会照单全收，把页面撑得无法滚动。设 max-height: 200px 后，超出部分自动触发 overflow-y: auto（默认行为），但前提是没写 resize: none —— 这里容易踩坑：
- 写了
resize: none：滚动条仍会出现，但用户无法手动拉伸，体验断层 - 没写
resize：浏览器默认resize: both，右下角拖拽柄会和自适应逻辑冲突，拉伸后field-sizing失效 - 正确写法：
resize: vertical—— 允许用户向上/下拉，但禁止横向拉宽破坏布局
另外，max-height 值要留出滚动条宽度余量（约 12–16px），否则在 macOS 上可能出现双滚动条。
旧浏览器 fallback 必须用 JavaScript 拦截
CSS 不会自动降级。当 field-sizing 不被支持时，浏览器直接忽略该声明，元素保持 field-sizing: fixed，此时若没 JS 备份，输入框就彻底“僵住”。不能依赖 @supports 包裹整个逻辑，因为：
-
@supports (field-sizing: content)在 Safari 17.3 中返回 true，但实际不生效（已知 bug） - 更可靠的方式是运行时检测：
const supportsFieldSizing = 'fieldSizing' in document.documentElement.style; - 若不支持，立即挂载
input事件监听器，走scrollHeight动态赋值的老路
真正麻烦的不是兼容本身，而是同一份 DOM 节点在不同浏览器里走两套尺寸逻辑：一个靠浏览器引擎算，一个靠 JS 算。padding、border、font-size 微小差异都会导致高度错位一像素——这问题在移动端尤其明显，必须在真机上反复测。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
