最稳起点是 width: 100% + box-sizing: border-box，但需显式设 min-width: 0 解决 flex 下收缩失效，避免 width 冲突，用 flex: 0 1 0 替代 flex: 1，textarea 须 height: auto + min-height + align-self: flex-start，内容宽度自适应暂无可靠纯 CSS 方案。
直接用 width: 100% + box-sizing: border-box 是最稳的起点，但仅靠它无法解决 flex 场景下收缩失效、内容撑宽、高度自适应等真实问题。
为什么 width: 100% 在 flex 容器里经常不生效
根本原因不是 CSS 写错了，而是 input 元素自带 min-width: auto —— 它会强制元素至少和内容一样宽，哪怕父容器已经设了 display: flex 和 flex-grow: 1，这个默认行为也会架空伸缩逻辑。
- 必须显式加
min-width: 0，这是硬性前提，不是可选项 - 避免同时写
width: 100%或固定值（如width: 300px），它会和flex规则冲突，尤其在 IE11 或嵌套 flex 中直接失效 - 旁边有搜索图标按钮时，记得给它加
flex-shrink: 0，否则图标可能被压缩变形 - 更稳妥的写法是
flex: 0 1 0（不放大、可收缩、基准为 0），而不是看起来简洁的flex: 1（等价于flex: 1 1 0%，第二个1表示可被压缩）
box-sizing: border-box 不只是“防溢出”，它影响所有尺寸计算
没它，padding 和 border 会额外加在 width 外，导致实际宽度超父容器；有它，width 才真正代表“总宽”。但这还不够：
- 移动端键盘弹出时，视口高度突变可能触发重排，
flex-grow误判剩余空间，输入框突然变窄 —— 此时box-sizing: border-box能保尺寸不叠加，但不能阻止重排本身 - 暗色模式切换时，
outline颜色变化引发重绘，若没设outline-offset，可能造成视觉跳动 -
box-sizing对textarea同样关键：不加它，min-height+padding容易让滚动条提前出现
textarea 自适应高度必须绕开 height: 100%
input[type="text"] 无法真正自适应高度，只能用 textarea 替代。但常见错误是直接设 height: 100% 或固定值，这会让自动撑高逻辑彻底失效。
立即学习“前端免费学习笔记（深入）”；
- 必须用
height: auto，配合min-height设最小高度 - 父容器是
display: flex时，要加align-self: flex-start，否则textarea可能被拉伸填满整行 - 禁用
resize: both，只留resize: vertical，防止用户拖宽破坏布局 - JS 动态计算高度时，别在
input事件里立刻读scrollHeight—— 字体未加载完会导致值偏小，建议用requestAnimationFrame延迟一帧再读
内容宽度自适应（非填满父容器）仍无纯 CSS 通解
想让输入框宽度随当前输入内容长度变化（比如搜索词越长，框越宽），目前没有浏览器原生支持的可靠方案。所有“纯 CSS”实现都依赖 hack：
-
contenteditable+div模拟：丢失表单原生校验、无障碍支持弱、移动端光标定位不准 - 透明
span同步内容 +position: absolute覆盖input：需 JS 同步文本、监听字体加载、处理粘贴/撤销等边界操作 -
field-sizing: content是新属性，但截至 2026 年 7 月，仅 Chrome 125+ 实现，Firefox 和 Safari 尚未支持，生产环境不可依赖 - 真正能落地的，仍是设合理
min-width（如200px）和max-width（如500px），用百分比或flex控制范围，接受“内容长度不影响宽度”这一事实
最易被忽略的点：所有尺寸控制（min-width、max-width、flex-basis）尽量用像素值，避免在 flex 容器中混用百分比或 calc() —— 它们在不同浏览器中的解析顺序和时机差异极大，尤其在折叠屏横竖切换或 ResizeObserver 触发不准时，会暴露隐藏的布局抖动。
