原生 select 的弹出菜单高度由系统控制，CSS 无法干预；可用 size 属性固定可见行数，或改用 div+ul 自定义下拉实现高度自适应。
select 元素在数据动态加载后，其下拉弹出菜单的高度不会自动变化 —— 这不是 bug，是浏览器的固有行为。你改了 option 列表，但点击后弹出的菜单行高、可见项数、滚动逻辑全由系统 UI 控制，CSS 无法干预。
为什么 height 和 max-height 对 select 的弹出菜单无效
浏览器把 select 拆成两个独立渲染层：顶部可样式化的“选中区”（height 能影响它），和底层操作系统级绘制的“弹出菜单”（CSS 完全失能）。哪怕你用 JS 动态插入 50 个 option，Chrome / Edge 弹出菜单默认仍只显示约 8 行，超出就加滚动条；Firefox 略多（10–12 行），Safari 最少（常卡在 6 行）。
-
size属性可强制显示固定行数（如size="10"），但它会禁用原生下拉箭头，变成始终展开的列表框，语义和交互都变了 -
appearance: none只能隐藏箭头，不改变弹出菜单的渲染机制 - 给
select加overflow: hidden或max-height，对弹出层零影响
真正可控的替代方案：用 div + ul 模拟下拉
如果你需要弹出区域高度随内容自适应（比如加载完 3 项就显 3 行，加载 20 项就支持滚动），必须放弃原生 select，改用自定义结构：
- 外层
div设position: relative，作为定位容器 - 按钮（触发器）用
button，带aria-expanded状态 - 下拉列表用
ul，设max-height: 200px+overflow-y: auto，height: auto让它按内容撑开，但不超过上限 - JS 加载新数据后，清空
ul再 appendli，DOM 更新即刻反映高度
示例关键 CSS：
立即学习“前端免费学习笔记（深入）”；
ul.dropdown-menu {
position: absolute;
top: 100%;
left: 0;
width: 100%;
max-height: 200px;
overflow-y: auto;
margin: 0;
padding: 0;
background: #fff;
border: 1px solid #ccc;
}
如果非要用原生 select，只能妥协控制可见行数
原生方案只剩一个可靠出口：size 属性。它不依赖 JS，加载完数据后直接设置即可：
- 数据少（≤6 条）：设
size="6"，全部展开，无滚动 - 数据中等（7–15 条）：设
size="8"，固定显示 8 行，多余内容需滚动 - 数据多（＞15 条）：不推荐设大
size，用户会困惑——这看起来不像下拉，像列表框 - 注意：
size值为 1 时退化为默认下拉样式，所以不能靠它“恢复”原状
JS 设置方式：selectEl.size = Math.min(data.length, 8)，记得在插入 option 后执行。
最易被忽略的一点：iOS Safari 对原生 select 的触摸热区有硬性最小尺寸（44×44px），哪怕你用 transform: scale() 缩小了视觉尺寸，点按失效风险依然存在。真要兼顾高度控制、可访问性和触控可靠性，自定义下拉仍是唯一稳解。
