原生select无法根据选项数量自动调整下拉弹出层高度，因其弹出菜单由系统或浏览器UI层独立绘制、脱离DOM，CSS完全失效；真正自适应需用div+ul+JS模拟，通过max-height与scrollHeight动态控制高度，并完善键盘导航和无障碍支持。
原生 select 无法根据选项数量自动调整下拉弹出层高度——浏览器根本不给你这个控制权；所谓“自适应”，只能靠绕过原生渲染，用 div+ul+JS 模拟实现。
为什么 select 的 height 和 max-height 都不生效
点击 select 后弹出的菜单是操作系统或浏览器 UI 层绘制的独立窗口，不在 DOM 中，CSS 完全失效。你写的 height: 200px 或 max-height: 150px 只可能影响顶部按钮区（还经常被忽略），对弹出项的高度、行数、滚动逻辑零作用。
- Chrome/Edge：无视
line-height、padding、overflow，弹出高度固定约 8–12 行 - iOS Safari：强制最小触摸热区 44×44px，强行缩放会导致点不中
- Firefox：个别版本允许微调，但行为不稳定，不能依赖
-
option元素上任何尺寸相关 CSS（height、line-height、margin）全部被忽略
用 size 属性“伪自适应”：只适用于列表模式
如果你能接受放弃传统下拉箭头、改用常驻列表样式，size 是唯一原生可控方式。它不感知选项数量，但可设为一个合理上限值，让容器撑开到对应行数。
-
size="1"回退为默认下拉行为（但部分旧 Safari 会丢箭头） -
size="6"强制显示 6 行，超出自动滚动，height和font-size此时才真正生效 - 移动端慎用 >6 行：
size值越大，渲染越重，长列表易卡顿 - 别混用
size和multiple来“假装单选”——语义混乱，表单提交值类型可能错乱
真·自适应高度：必须用 JS + ul 滚动容器
要让下拉区域高度随选项增减自然伸缩（比如 3 项时高 120px，12 项时高 380px），只能自己造一个 ul 容器，并用 JS 控制其 max-height 与 scrollHeight。
立即学习“前端免费学习笔记（深入）”；
-
ul必须设max-height（如200px），不能设height或min-height，否则破坏自适应逻辑 - 每次动态增删
li后，先清空ul.style.height（避免内联样式锁死高度），再读ul.scrollHeight - iOS Safari 对
scrollHeight更新有延迟，得包一层requestAnimationFrame才准 - IE11 把
\r\n当一个字符算，导致scrollHeight偏小，建议统一换行符：text.replace(/\r\n/g, '\n') - 别在父级
.dropdown上写height或overflow——它会直接截断内容，让ul失去伸展空间
最容易被忽略的一点：高度只是表象，焦点和键盘才是坑
哪怕你把 ul 高度算得再准，如果没处理 ArrowDown/Enter/Escape 键响应、没同步原生 select 的 value 和 selectedOptions、没设 aria-expanded 和 aria-activedescendant，这个“自适应高度”在屏幕阅读器里就是不可用的，在 iOS Safari 上点一下就失焦，在 Android Chrome 里按方向键根本不动——高度调得再顺滑，也等于没做。
