width: 100%在flex子项中不生效，是因为flex布局下width仅为初始参考，主轴尺寸由flex-basis和flex-shrink决定；input默认flex: 0 1 auto，flex-basis: auto优先取内容宽，覆盖width。
为什么 width: 100% 在 Flex 子项中常常不生效
不是你写错了，而是浏览器压根没打算按这个值算尺寸。Flex 布局下，width 只是初始参考，真正参与主轴分配的是 flex-basis 和 flex-shrink。input 默认 flex: 0 1 auto，其中 flex-basis: auto 会优先取内容宽度（比如 placeholder 长度），width: 100% 被直接忽略。
常见错误现象：
- 写了
width: 100%，但 input 仍窄得只能塞进两个字符 - 桌面端看着正常，iOS Safari 里 input 塌成一条竖线
- 父容器加了
max-width或是inline-flex，width: 100%突然完全失效
width: 100% 能用的前提条件
它不是不能用，而是必须满足三个硬性条件，缺一不可：
- 父容器必须有明确宽度（比如
width: 100%、max-width: 400px，或被撑开的块级上下文） - input 不能同时设
flex相关属性（如flex: 1），否则flex-basis: 0会覆盖width - 必须显式关闭默认收缩：
flex-shrink: 0，否则哪怕写了width: 100%，也会被兄弟元素挤缩
推荐写法：width: 100%; flex-shrink: 0; —— 这比单独写 width: 100% 稳定得多。
为什么包裹一层 <div> 反而更可靠
<p>直接在 input 上硬刚 <code>width 容易翻车，尤其在移动端或老浏览器里。更稳妥的做法是用一层容器承接弹性行为：
- 外层
<div> 设 <code>flex: 1; min-width: 0;，负责吃掉剩余空间
- 内部
<input> 设 width: 100%; box-sizing: border-box;，只管填满父容器
- 这样既绕开了 input 的
min-width: auto 封锁，又避免了 flex 和 width 的冲突
示例：
<div style="display: flex">
<div style="flex: 1; min-width: 0">
<input style="width: 100%; box-sizing: border-box">
</div>
<button style="flex: 0 0 auto">提交</button>
</div>
移动端和 IE 兼容时的特别注意点
<div> 设 <code>flex: 1; min-width: 0;，负责吃掉剩余空间
<input> 设 width: 100%; box-sizing: border-box;，只管填满父容器min-width: auto 封锁，又避免了 flex 和 width 的冲突示例：
在 iOS Safari 或 IE11 中，width: 100% 单独作用于 input 更容易失效，原因包括：
- Safari 对无宽 flex 子项更保守，
flex-basis: auto可能回退到极小的 intrinsic width - IE11 不支持
flex-basis: 50%，但对width: 100%的解析也受父容器 display 类型影响（比如inline-flex下基本无效） - viewport 缺失或设置错误（如漏了
<meta name="viewport" content="width=device-width">）会让整个计算链漂移
此时不要死磕 width: 100%，优先用 flex: 1 1 0; min-width: 0; 组合，并确保父容器有 width: 100% —— 这个组合在所有现代浏览器和 IE11 中都可预期。
最常被忽略的一点：问题往往不出在 input 本身，而出在它的父容器有没有真正“占满可用宽度”。用开发者工具检查 computed width，而不是只看 styles 面板里的声明。
