flex: 1 + min-width: 0 是输入框自适应的硬性前提，缺一不可；浏览器默认给 input 设 min-width: auto（Chrome 约 120px），不加 min-width: 0 则 flex 分配失效，width: 100% 会与 flex 冲突导致布局崩坏。
flex: 1 + min-width: 0 是输入框自适应的硬性前提
写了 flex: 1 却不生效，八成是漏了 min-width: 0。浏览器给 <input> 设了默认 min-width: auto，它会强行卡住最小宽度（Chrome 下约 120px），让 flex 分配完全失效。
必须同时写这两条才真正起效：
-
flex: 1提供伸缩能力 -
min-width: 0才释放收缩权限——缺一不可 - 别用
width: 100%替代，它和 flex 规则冲突，在嵌套布局或 IE11 中直接崩 - 按钮类元素要加
flex-shrink: 0，否则小屏下被压扁，反而挤占输入框空间
绝对定位只适合弹层，别用在主搜索框本体上
把整个搜索框用 position: absolute 塞进页面某处，看似“固定位置”，实则埋雷：iOS 键盘弹出时，它常被顶出可视区；focus 后浏览器无法自动滚动定位；还破坏可访问性和媒体查询断点适配。
真正需要的是内容驱动的宽度响应，不是靠定位“卡住”：
立即学习“前端免费学习笔记（深入）”；
- 主搜索框用
display: flex或display: grid，输入框靠flex: 1或grid-column: 1fr占位 - 弹层（如搜索建议下拉）才用
position: absolute+width: fit-content，且必须配min-width: 240px和max-width: 320px - IE11 不支持
fit-content，fallback 方案是套一层display: inline-block容器再定位
移动端必须显式控制视口与盒模型
没加 <meta name="viewport" content="width=device-width, initial-scale=1">，width: 100% 和 flex 计算全乱；没写 box-sizing: border-box，padding 和 border 会额外撑宽，导致横向溢出。
关键防护项：
- 所有表单控件统一加
box-sizing: border-box，避免内边距叠加 - 输入框设
min-height: 44px，满足移动端最小点击区域规范 - 键盘弹出时
100vh失真，父容器别依赖它做高度基准 - textarea 高度自适应必须用
height: auto+min-height，禁用height: 100%
内容宽度自适应（随文字变宽）目前没有纯 CSS 通解
想让 <input> 宽度随当前输入文字长度实时变化？CSS 没原生方案。浏览器把 <input> 当作替换元素，shadow-root 内部尺寸不受 CSS 控制，fit-content、width: max-content 对它无效。
可行路径只有两条：
- 用
contenteditable的<div>模拟，设display: inline-block，天然随内容伸缩 - JS 动态计算：创建隐藏
<span>同步文本样式与内容，读取offsetWidth后赋给 input - 别信
field-sizing: content—— 它是实验性属性，2026 年仍无主流浏览器稳定支持
