原生select的下拉弹出层是系统级组件，css的height或max-height对其无效；可用size属性控制可见行数，或用容器设置max-height+overflow-y: auto实现滚动，自定义下拉时需在ul上设max-height和overflow-y: auto。
直接给 select 设 height 或 max-height 无效
原生 select 的下拉弹出层是脱离 DOM 流的系统级组件（Windows 用 ComboBox，macOS 用 NSPopUpButton，iOS/Android 是全屏 modal），CSS 根本穿不透。你在 select 上写 height: 40px 或 max-height: 200px，只可能压扁顶部按钮区，对弹出菜单高度、行高、滚动行为零影响。DevTools 里看到样式“生效”，只是假象。
把 select 包进固定高度容器并启用滚动
这是最轻量、兼容性最好的折中方案，适用于选项较多但不想重写交互的场景：
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- 用
<div class="select-wrapper"><select></select></div>包裹select -
select-wrapper设max-height: 200px和overflow-y: auto，宽度需明确（如width: 100%） -
select自身**不设height、min-height或overflow**，否则会干扰自然撑高逻辑 - 此方案仅在
select的size属性 > 1 时生效（即强制显示多行列表框），若size="1"，仍走原生弹出行为
用 size 属性控制可见行数（原生最稳解）
size 是 HTML 原生属性，不是 CSS，它让 select 渲染为常驻列表，此时高度由行数 × 浏览器默认行高决定，且滚动稳定、聚焦正常：
-
<select size="4"></select>→ 展开后固定显示 4 行，超出自动滚动条 - 可与
multiple共存，但视觉变为多选列表，失去传统下拉箭头 - 移动端（尤其 iOS Safari）可能无视
size，强制走全屏选择器，需实测 - 别设
size="1"试图“伪装”成下拉——旧版 Safari 可能丢失箭头，且语义模糊
自定义下拉时 <ul></ul> 必须设 max-height 而非 height
一旦放弃原生 select，改用 <div>+<button>+<ul>+<li> 模拟，高度控制权才真正回归你手。关键细节在滚动容器的约束逻辑：
<ul>
<li>
<code><ul></ul> 上设 max-height: 200px 和 overflow-y: auto，**不能设 height 或 min-height**
<ul></ul> 的 height: 100% 是安全的——因为父级 .dropdown 没写死高度，100% 实际等价于 auto
overflow-y: auto 必须放在 <ul></ul> 上，而不是父级 .dropdown；否则滚动作用于整个弹层，而非仅内容区<li> 后，记得先清空 ul.style.height（设为 'auto'），再读取 scrollHeight，否则旧内联高度会锁死select 的弹出层是黑盒。所谓“调整高度”，本质是在 size 的妥协、容器滚动的折中、和自定义组件的投入之间做选择——每种路径都有它绕不开的兼容性边界和无障碍代价。
