HTML 元素无法通过 CSS 的 overflow 属性控制下拉列表滚动，因其弹出菜单由系统/浏览器 UI 层独立绘制、脱离 DOM；可靠方案仅有两个：一是用 size 属性转为多行常驻列表并配合 height 和 overflow-y: auto，二是用 JavaScript 构建完全自定义下拉组件以实现滚动、搜索及可访问性支持。
HTML overflow 属性
直接给 元素设置 overflow: auto 或 overflow-y: scroll 完全无效——浏览器原生下拉框的弹出列表（ 渲染区域）是脱离 DOM 流、由操作系统或浏览器 UI 层独立绘制的，CSS 无法控制其内部滚动行为。
真正能控制“选项溢出”的只有两个可靠路径
要么改用自定义下拉组件（完全接管 DOM），要么借助浏览器默认行为做有限约束：
-
限制可见选项数：用
size属性让始终以多行列表形式展开，此时可配合height+overflow-y: auto控制容器滚动 —— 但这不是“点击展开下拉”，而是常驻列表 -
用 JavaScript 模拟下拉：隐藏原生
，用+重绘选项区，此时可自由设置max-height和overflow-y: auto- 部分浏览器支持
multiple+size组合实现带滚动的多选列表，但 UX 和语义与单选下拉差异很大，不推荐混用Chrome / Edge 中
下拉高度受系统限制，无法强制即使通过
-webkit-appearance: none重置样式，点击后弹出的下拉面板高度仍由系统菜单策略决定（例如 Windows 上通常最多显示 10–12 项，超出则自动加滚动条；macOS 表现更不可控）。你无法用 CSS 的max-height或overflow影响它。- 开发者工具里看到的
元素只是触发器，真正的下拉列表不在 HTML DOM 树中 - 试图用
transform或position: absolute干预弹出位置，大概率失败或引发兼容性问题 - 某些旧版 IE 曾允许
select { height }影响下拉高度，但现代标准已废弃该行为
真要滚动+美观，只能上 JS 自定义下拉
这是唯一能稳定控制选项区高度、滚动、搜索、键盘导航、焦点管理的方式。核心逻辑是：
立即学习“前端免费学习笔记（深入）”；
- 隐藏原生
（opacity: 0+position: absolute） - 用 模拟按钮，点击时显示
- 为
.dropdown-list设置max-height: 200px+overflow-y: auto- 用 JS 同步选中状态到原生
，保证表单提交和可访问性注意：绕过原生控件意味着你要自己处理
aria-expanded、aria-activedescendant、键盘ArrowDown/Enter等可访问性细节，否则对屏幕阅读器用户不友好。 - 为
- 部分浏览器支持
