input宽度不自动缩放的根本原因是min-width: auto和box-sizing: content-box的默认行为，需同时设置box-sizing: border-box和min-width: 0才能使width: 100%或flex-grow: 1生效。
input 的宽度不会自动随父容器缩放，除非你显式打破它的默认尺寸约束——它自带 min-width: auto，且默认 box-sizing: content-box，这两个行为叠加，会让 width: 100% 失效或溢出。
为什么 width: 100% 常常不生效
根本不是 CSS 写错了，而是浏览器给 input 设了“防收缩保护”：
-
min-width: auto强制它至少和当前内容一样宽，哪怕父容器只有 200px，输入“hello”也可能撑到 220px -
box-sizing: content-box（默认）让width: 100%只管内容区，padding和border额外加在外面，实际宽度 = 父宽 + 左右 padding + 左右 border - 在
display: flex容器里，这个min-width: auto会直接架空flex-grow: 1
必须加的两个声明：box-sizing: border-box + min-width: 0
这是所有场景下最基础、最稳的组合，缺一不可：
-
box-sizing: border-box：让width: 100%真正代表“总宽度”，padding和border往里缩 -
min-width: 0：解除浏览器对替换元素的默认宽度保护，是flex-grow: 1或width: 100%能生效的前提 - 如果父容器是
flex，建议直接写flex: 0 1 0（不放大、可收缩、基准为 0），比flex: 1更可控 - 避免同时写
width: 100%和flex: 1，尤其在 IE11 或嵌套 flex 中会冲突
嵌套 wrapper 时用 cqw 锚定祖父容器宽度
当 input 被包在一层 position: relative 的 div#wrapper 里（比如要加搜索图标），而你想让它按祖父容器（如 #container）宽度的 80% 计算，传统 width: 80% 会错配到窄小的 wrapper 上。
- 在祖父容器上加
container-type: inline-size - 在
input上用width: 80cqw，而非80% -
wrapper保持display: inline-block; position: relative即可，不用设宽高 - 兼容性注意：Chrome 111+、Firefox 117+、Safari 16.4+ 原生支持；旧浏览器需 fallback 到 JS 或固定像素
移动端键盘弹出时的宽度突变
键盘弹出会触发视口高度重算，部分安卓 WebView 会误判 100vh 或 flex 剩余空间，导致 input 突然变窄甚至换行。
- 不要依赖
100vh控制输入框高度或容器高度 - 父容器务必加
width: 100%或max-width: 100%，防止继承过宽祖先宽度 - 若用
flex，确保input的align-self: flex-start（尤其配合textarea时） - 焦点态慎用
outline，改用box-shadow并设outline-offset: 0，避免重排跳动
真正麻烦的不是怎么让它“看起来撑满”，而是撑满之后，min-width: auto、键盘弹出、暗色模式、老浏览器这些边界条件会悄悄破坏它——每个都得单独补漏，不是加一行 width: 100% 就完事。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
