flex-basis: 0 + flex-grow: 1 仍窄成一条，因浏览器默认 min-width: auto 仅防收缩、不保撑开；需加 min-width: min-content 强制容纳最长单词或图标组合，ie11 则须回退 flex: 1 1 auto。
直接用 flex-basis: 0 不行，必须配 min-width: min-content 才能真正撑开建议项——否则现代浏览器会把宽度压到单字宽，IE11 则直接不显示。
为什么 flex-basis: 0 + flex-grow: 1 还是窄成一条？
这是最常见的错觉：以为设了 flex-basis: 0 就能“让内容决定宽度”，但实际中浏览器默认对 flex item 施加 min-width: auto，它会阻止收缩，却**不保证撑开**。文本若无换行约束或最小尺寸锚点，就会被压缩到视觉不可见的程度。
-
min-width: min-content是关键补丁：它强制元素至少容纳最长单词或内联盒（比如“超长搜索关键词”或带图标的文字组合） - 别用
fit-content—— Safari 15.4+ 才稳定支持，Chrome/Firefox 虽已支持但行为略有差异 - 如果建议项含图标，记得给图标加
flex-shrink: 0，否则文字缩太狠时图标会被拉变形
纯 CSS 同步输入框宽度的可靠写法
把建议列表和输入框塞进同一个 display: flex 容器看似省事，但会导致建议项被输入框的 flex-basis 拉扯变形，尤其在 resize 或 zoom 场景下。
- 推荐分离布局逻辑：输入框走 flex，建议列表用
position: absolute脱离文档流 - 纯 CSS 方案：
width: max-content; max-width: 100%，配合box-sizing: border-box - JS 辅助更稳：监听
input事件，读取input.getBoundingClientRect().width，赋给建议列表的style.width
IE11 下完全失效怎么办？
IE11 对 flex-basis: 0 的解析是渲染引擎级缺陷：它直接按 0 渲染，不看内容，建议项会消失。这不是兼容性开关问题，没法靠前缀修复。
- 必须回退到
flex: 1（即flex: 1 1 auto），让 IE11 基于内容计算宽度 - 用
@supports not (flex-basis: 0)加载 IE 专用规则，避免污染现代浏览器 - 如果项目已放弃 IE11，就别加降级逻辑——
flex: 1 1 0+min-width: min-content一行就够
真正麻烦的不是怎么让它撑开，而是撑开之后，滚动重排、缩放跳动、输入法候选框遮挡、暗色模式下阴影溢出……这些边界场景不会报错，但用户一眼就能感觉到卡顿或错位。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
