下拉列表应使用 max-height 配合 overflow-y: auto 实现自适应高度与滚动，优先采用 vh 单位并避免 height: 100% 或 flex: 1；需解决父容器层叠上下文导致的截断问题、iOS 滚动条隐藏及键盘导航时焦点项不可见等核心难点。
下拉列表高度随内容自适应，但要限制最大高度
直接用 max-height 配合 overflow-y: auto 是最常用也最稳妥的做法。关键不是“设多少像素”，而是让容器在小屏时缩窄、大屏时撑开，同时内部滚动不破坏布局流。
- 不要用
height: 100%或flex: 1强撑，容易和父容器高度冲突，尤其在position: absolute的下拉菜单里会失效 -
max-height建议用vh单位（比如max-height: 60vh），比固定像素更适配不同设备；若需兼容老浏览器，可 fallback 到px - 必须加
overflow-y: auto，否则超出部分直接被裁掉，用户根本看不到后面选项
移动端点击后下拉列表被遮挡或错位
这是 position: absolute 下拉容器 + 父元素 overflow: hidden 或 transform 导致的层叠上下文断裂。浏览器把下拉框截断在父级边界内，而不是按视口定位。
- 检查父级是否意外加了
overflow: hidden、transform: translateZ(0)或will-change—— 这些都会创建新的 stacking context，限制子元素的绝对定位范围 - 解决方案：把下拉列表移出父级 DOM（比如挂到
body下），再用 JS 动态计算位置；或者给父级加overflow: visible（前提是不影响其他样式） - 避免在下拉触发元素上直接写
transform，改用top/left定位更可控
滚动条在 Safari / iOS 上不显示或样式异常
iOS Safari 默认隐藏原生滚动条，且 ::-webkit-scrollbar 伪元素在部分版本中不生效，导致用户不知道内容可滚动。
- 先确保有
overflow-y: auto和足够内容（至少超出max-height2 行以上），否则滚动行为不会触发 - 加
-webkit-overflow-scrolling: touch（仅 iOS 7–12，现代 iOS 已弃用但保留兼容性）能恢复惯性滚动，但可能引发重绘问题，建议只在必要时启用 - 如需自定义滚动条，用
::-webkit-scrollbar+::-webkit-scrollbar-thumb，但注意它只在桌面 Chrome/Safari 有效；iOS 上只能靠 padding/margin 暗示“还有内容”
键盘导航时下拉列表高度不跟随焦点滚动
用方向键操作下拉选项时，如果焦点移出可视区，列表不会自动滚动到对应项——这本质是 scrollIntoView 没被调用，和 max-height 无关，但用户感知是“高度没跟上”。
- 监听
keydown，在焦点切换后对当前高亮<li>或<option></option>调用element.scrollIntoView({ block: 'nearest' }) - 别用
behavior: 'smooth'，它在快速连按方向键时容易卡顿或跳帧 - 如果下拉是虚拟滚动（只渲染可视区域），那必须手动维护焦点项索引并计算偏移量，不能依赖 DOM 查找
实际最难处理的是「多层嵌套弹出 + 键盘导航 + 移动端触摸滚动」三者叠加的场景，这时候 max-height 只是起点，真正卡住人的往往是滚动上下文、焦点管理、事件拦截之间的耦合。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
