CSS field-sizing content 与 min-height 怎么配合

field-sizing: content 决定表单控件如何按内容计算首选尺寸，min-height 给高度设下限，两者可以同时使用。对于常见的多行备注框，我会先让它占满表单栏宽，再设置最小高度和最大高度：空白时保留编辑空间，内容增加时长高，到达上限后在框内滚动。

它适合替代部分“监听输入再测量高度”的代码，但不能忽略布局约束。本文只讨论水平书写模式下的 textarea，不把单行 input 当成自动换行输入框。

Web CSS 文档地址：https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/field-sizing

先定义空白、增长、封顶三种尺寸目标

给备注框定规则时，我倾向于先写下三种需求：空内容也有足够的点击区域；输入多行文字时不立即出现滚动条；内容很长时不能无限推走提交按钮。这三个需求分别交给最小高度、内容尺寸和最大高度处理，没必要用一个固定 height 包办。

理解内容尺寸与最小高度的关系

field-sizing 的默认值是 fixed，表示使用控件原有的首选尺寸行为，并不等于作者写死了像素高度。改成 content 后，浏览器按内容处理首选尺寸；min-height 仍然参与最终尺寸约束。内容需要的高度低于下限时，控件保留最小高度；超过下限时，允许继续增长。

对于 textarea，宽度限制会促使文字折行，进而增加高度。因此，想实现“只在纵向长高”的表单，可以明确设置 width: 100%。这有意约束横向尺寸，并不会妨碍高度按内容增长。真正与目标冲突的是又写上固定 height，让纵向尺寸也失去弹性。

另外，placeholder 也可能影响内容尺寸。不要把长提示语撑起的高度误认为 min-height 失效。启用 content 后，textarea 的 rows、cols 不再决定其默认首选尺寸；需要明确下限时，用 CSS 表达更直接。

实现固定栏宽下的自适应文本域

下面用一张售后备注表单说明属性如何组合。示例是可供接入项目的写法，不是本机运行记录。label 保留独立名称，提示信息通过 aria-describedby 关联，placeholder 只提供简短示例。

  售后备注
  
请填写联系时段和需要补充的情况。
  保存备注

.note-form {
  display: grid;
  gap: 0.75rem;
  width: 100%;
  max-width: 42rem;
}
.note-form textarea {
  /* 边框和内边距纳入宽度，避免撑出表单栏 */
  box-sizing: border-box;
  min-width: 0;
  width: 100%;
  font: inherit;
  line-height: 1.5;
  padding: 0.75rem;
  border: 1px solid #8793a3;
  border-radius: 0.5rem;

  /* 不写固定 height：空白保底，长内容封顶 */
  min-height: 8rem;
  max-height: 20rem;
  overflow-y: auto;
  resize: vertical;
}
@supports (field-sizing: content) {
  .note-form textarea {
    /* 支持时采用内容尺寸，原有高度上下限继续生效 */
    field-sizing: content;
    resize: none;
  }
}

这里的 8rem 和 20rem 是该示例的设计选择，不是浏览器规定的最佳值。使用 border-box 后，高度限制包含内边距与边框；字体变大、行高变大时，同样的高度能显示的行数会减少。若需求明确为“至少四行正文”，应结合行高、内边距与边框计算下限，而不能简单把四行乘积当成外部总高度。

处理高度上限与旧浏览器降级

支持 content 的环境中，文本域沿纵向增长，到 max-height 后由 overflow-y: auto 承担滚动。若同时用了 overflow: hidden，长内容就可能缺少方便的滚动入口，不适合作为这个封顶方案的默认设置。

不支持该声明的浏览器不会进入 @supports 内的规则。上述基础样式保留普通 textarea、rows 提供的初始偏好，以及可手动纵向拖动的能力；CSS 最小最大高度仍约束它。这是功能降级，不承诺旧环境也自动长高。若业务必须在所有目标环境保持自动增长，再另行选择脚本实现，避免原生和脚本两套高度逻辑同时接管同一字段。

外层布局也可能形成额外限制。父级固定高度、Grid 或 Flex 的拉伸、其他选择器设置的 height 或 min-height，都可能改变最终占位。移植时应围绕控件实际继承到的布局规则处理，不能只关注一个新属性。min-height 若大于 max-height，最小尺寸约束优先，应先修正相互矛盾的上下限。

整理冲突属性和常见问题

我推荐的接入顺序是：先确保普通文本域可用，再确定栏宽和高度下限，随后启用 content，最后补上高度上限与滚动规则。这样每条声明都有明确职责，也便于后续设计调整。

min-height 会阻止内容自适应吗？

不会。它只设置下限；持续固定的 height 才通常会让纵向内容尺寸失去作用。还要注意其他布局约束可能决定最终高度。

为什么 rows 改了以后没有预期效果？

content 会替代 textarea 原来的默认首选尺寸行为，rows 和 cols 不再按原来的方式决定尺寸。把需要的最小编辑高度写进 CSS。

能否给单行 input 同样设置后自动换行？

不能。单行输入控件不会因此变成多行文本域。需要多行文字应使用 textarea，再处理宽度和高度限制。

最终取舍很清楚：希望备注框保留起始空间又能按内容长高，用 content 加 min-height；希望长内容不占满页面，再加 max-height 和内部滚动。固定栏宽是表单对齐的选择，高度弹性则留给内容。

资料：MDN field-sizing；CSS 表单控件样式规范。