field-sizing: content 会怎样改变表单控件尺寸？

简答

• field-sizing: content 让 textarea、input、select 按内容计算固有尺寸，替代过去监听 input 读 scrollHeight 的脚本。
• 它不是无限增长，最终尺寸仍受 min-*/max-*、父容器、字体和换行约束，必须给上限。
• 默认值 fixed 保持原有尺寸，适合需要对齐的表单；content 只用在确实需要随内容变化的控件上。
• 不支持的浏览器会忽略它，基础表单仍应能用，所以按渐进增强处理。

.comment {
  field-sizing: content;
  min-block-size: 3lh;
  max-block-size: 12lh;
  inline-size: min(100%, 42rem);
  overflow-y: auto;
  overflow-wrap: anywhere;
}

fixed 和 content 表达不同的产品意图

登录框、表格筛选和多字段横排适合 fixed；备注、标签输入、选项长度差异大的控件适合 content。自适应宽度的输入框在输入过程中会推动旁边的按钮，工具栏和表格列里应保持稳定尺寸：

.search-input {
  field-sizing: content;
  min-inline-size: 12rem;
  max-inline-size: 32rem;
}

.settings-form :is(input, select) {
  field-sizing: fixed;
  inline-size: 100%;
}

textarea 和 select 的边界

textarea 达到 max-block-size 后应滚动查看，不能隐藏溢出。字体加载完成后换行可能变化，首屏表单要避免尺寸变化推走提交按钮。尺寸策略也不能替代长度限制和服务端校验。

select 会按当前选项宽度变化，翻译后的长选项可能把它撑宽，所以同样要设最小和最大尺寸。原生下拉菜单打开后由平台绘制，不要为了控制尺寸用 div 重写 select，否则要自己补键盘、焦点、读屏和移动端交互。

和 fit-content、JavaScript 自动高度的区别

width: fit-content 是通用盒尺寸函数；field-sizing 改的是表单控件自身的固有尺寸，两者可以组合。JavaScript 方案仍适合要兼容旧浏览器或把行数同步给其他逻辑的场景，但要在输入、字体变化、容器变化和卸载时维护；CSS 和脚本同时控制同一尺寸时，要明确谁说了算。

无障碍与布局稳定

控件变大不会让读屏器知道“内容变多”，错误提示仍要用 aria-describedby 或原生约束校验表达。尺寸变化不能让焦点附近的操作离开视线，也不会解决移动端软键盘遮挡。

兼容回退

.comment {
  min-block-size: 2.5rem;
  max-block-size: 14rem;
  overflow: auto;
}

@supports (field-sizing: content) {
  .comment {
    field-sizing: content;
  }
}

固定尺寸在旧环境里能完成输入，就不必补脚本。验收覆盖空值、长单词和 URL、多行粘贴、RTL、文字放大、达到上限后的滚动与焦点、select 切换后的布局，以及表单 reset。