搜索框和列表需共用同一flex容器并设flex-direction: column，搜索框width: 100%，列表容器flex: 1且max-height约束，避免换行、溢出及iOS聚焦上推问题。
搜索框和列表如何用Flex对齐不换行
搜索框和列表容器必须共用同一个 flex 容器，否则无法实现真正的“同行对齐”。常见错误是把 <input> 和 <ul></ul> 放在不同父级里，结果搜索框总被挤到下一行。
- 把搜索框和列表都包进一个
<div class="search-list">，并设 <code>display: flex和flex-direction: column - 搜索框本身设
width: 100%，但别给它flex: 0 0 auto—— 否则在小屏下可能撑破容器 - 列表容器加
flex: 1，让它自动填满剩余空间；否则列表高度固定或塌陷，滚动失效 - 如果列表项太多，记得给列表容器加
overflow-y: auto，不然内容直接溢出不可见 - 别在
input的oninput里直接操作 DOM；先用Array.prototype.filter()算出匹配项 ID 或索引，再批量更新 - 把所有列表项提前存进数组（如
const items = Array.from(document.querySelectorAll('.list-item'))），避免反复查 DOM - 匹配逻辑用
textContent.toLowerCase().includes(keyword.toLowerCase())，别用正则——除非真要高亮，否则正则开销大且易错 - 空搜索词时，别用循环一个个删
display: none；统一用类名控制，比如切换.filtered类，CSS 写.filtered .list-item:not(.match) { display: none; } - 父容器（列表）没设
width: 100%或max-width，导致子项按内容宽度无限伸展 - 列表项用了
flex: 1或flex: auto，在 flex 容器中会主动拉伸，应改用flex: 0 0 auto - 列表项内部有图片或 inline 元素，未设
min-width: 0，触发 flex 最小尺寸保护机制，强行撑宽整行 - 调试技巧：在浏览器里选中列表项，看 computed 样式中
flex-basis是不是 unexpectedly 变成auto或具体像素值 - 给最外层容器加
height: 100vh，并确保html, body { height: 100%; margin: 0; } - 搜索框用
position: sticky替代固定定位，避免脱离文档流后 flex 失效 - 列表容器必须设
max-height（比如calc(100vh - 60px)），不能只靠flex: 1—— 否则 iOS 下计算高度为 0 - 必要时监听
focusin事件，临时给 body 加position: fixed锁定滚动，但要小心影响返回键行为
filter() 配合 display: none 实现搜索过滤时的性能陷阱
用 JavaScript 遍历列表项、匹配关键词后切 display: none 最简单，但每输一个字就重排全部 DOM，卡顿明显，尤其列表超 50 条时。
Flex布局下列表项换行错乱的三个典型原因
列表项本该垂直堆叠，却意外横向铺开或断行错位，基本都是 flex 项的 flex-shrink 或 min-width 撞上了父容器限制。
移动端搜索框聚焦时页面上推、列表被遮挡怎么办
iOS Safari 和部分安卓 WebView 在 <input> 获焦时会强制上推视口，如果列表容器没设明确高度或 flex 基准，整个布局就“飘”了。
立即学习“前端免费学习笔记（深入）”；
Flex 布局本身不处理输入法弹窗、软键盘高度变化这些原生行为，所有“列表突然消失”的问题，根源几乎都在容器高度没被显式约束住。
