配了八年表单，每次输入框高度都要靠 JS 硬算——今天 CSS 自己会了，field-sizing 把这件事彻底原生化了

写过 textarea 的人大概都踩过这个坑：用户输入一多，滚动条就冒出来了，要么靠 JS 监听 input 事件、读 scrollHeight、硬塞 height，要么玩「镜像 div」那套 hack——底下藏一个和 textarea 一样样式的东西，把文字同步进去，再拿它的高度去撑外面的容器。十几年了，每次接新项目都要重来一遍。

2026 年，浏览器终于把这件事还给你了。

三行代码，浏览器自己算

field-sizing: content 就是那个「魔法按钮」。切过去之后，表单控件（textarea / input / select）就自动跟着内容走，不再是固定高度：

/* 最简用法 */
textarea {
  field-sizing: content;
}

/* 配合 min/max 做约束，别让它无限膨胀 */
textarea {
  field-sizing: content;
  min-height: 3lh;   /* 最低三行，别让它缩成一条缝 */
  max-height: 10lh;  /* 超过十行就停，出现滚动条 */
  resize: none;      /* 用户不需要再手动拖了 */
}

/* input 同样适用，宽度自适应 */
input[type="text"] {
  field-sizing: content;
  min-width: 120px;
  max-width: 400px;
}

/* select 也可以，宽度跟着当前选中项走 */
select {
  field-sizing: content;
}

lh 单位是精髓——它等于元素的 line-height，比 px/em 更语义化，字号改了也不会跑版。

浏览器支持情况（2026 年 8 月）

Chrome 123（2024 年 3 月）首发，Safari 26.2（2025 年 12 月），Firefox 152（2026 年 6 月）跟进，三大引擎全部完成。web.dev 把这个节点定义为「Baseline Newly Available」，意思是核心浏览器集已受支持，正式进入可用阶段。目前覆盖约 1.67% 的页面加载量，还在上升。

对于还需要兼容旧浏览器的项目，用 @supports 做渐进增强：

@supports (field-sizing: content) {
  textarea { field-sizing: content; min-height: 3lh; max-height: 10lh; }
}
/* 旧浏览器继续跑你的 scrollHeight 那套 */

为什么 select 也值得关心

默认 select 的宽度取决于最长那个选项的文本，但切换之后宽度会跟着「当前选中项」走，而不是最宽那个。这个细节在标签编辑器（tag input）这类控件上特别有用——用户打一个字，输入框就宽一点；删到空了，缩回 min-width。

和 AI 编程工具的关系

现在用 Claude Code / Cursor 写表单，最常见的 auto-resize 代码就是那套 scrollHeight 逻辑。有了 field-sizing 之后，这类胶水代码可以直接删掉，设计系统里只要一行 CSS，所有表单控件统一行为。这是 2026 年浏览器帮前端工程师减负最实在的一个功能点之一。

下一步可以做的

翻出你的设计系统里那个 auto-resize textarea 组件——大概率是一段 input 监听 + scrollHeight + 硬写 height 的逻辑。换成 field-sizing: content 加 min-height: 3lh，然后把 JS 那段删掉就行。兼容旧浏览器的渐进增强方案一并加上，防止线上用户升级之前有回退。