height: fit-content 在存在 overflow-y: auto 的容器上失效，导致下拉菜单无法自动撑开；正确解法是移除外层 .dropdown 的 overflow 和固定高度限制，将 max-height 与 overflow-y: auto 移至 内部，使列表既保持内容自适应高度，又在超出时优雅滚动。
`height: fit-content` 在存在 `overflow-y: auto` 的容器上失效，导致下拉菜单无法自动撑开；正确解法是移除外层 `.dropdown` 的 `overflow` 和固定高度限制，将 `max-height` 与 `overflow-y: auto` 移至 `
- ` 内部，使列表既保持内容自适应高度，又在超出时优雅滚动。
- 移除 .dropdown 上的 height、min-height 和 overflow-y；
- 将 max-height 和 overflow-y: auto 应用于
- ；
- 保留
- 的 height: 100%（确保其继承父容器宽度并参与 flex 布局）；
- 所有
- 保持原有样式，无需调整。
在构建动态下拉菜单（Dropdown）时，一个常见且易被忽视的 CSS 行为陷阱是：对设置了 overflow-y: auto 的容器使用 height: fit-content，往往无法实现预期的“内容自适应高度”效果。这是因为浏览器在计算 fit-content 时，会将 overflow 视为潜在的滚动上下文，从而倾向于采用最小可滚动高度（常接近 0），而非真实内容高度。
✅ 正确解决方案：滚动逻辑下沉至
核心原则是——让容器（.dropdown）完全“透明”地包裹内容，把滚动控制权交给语义更准确的子元素 ：
这样，当
- 中只有 2 项时，它自然收缩为 2 × 30px = 60px（含边框）；当有 50 项时，一旦总高度超过 max-height（如 100px），滚动条自动出现，且初始展开状态始终紧贴内容。
✅ 优化后的关键 CSS 片段
.dropdown {
width: 100%;
background-color: blue;
/* ✅ 移除 height, min-height, overflow-y */
}
.dropdown ul {
width: 100%;
height: 100%; /* 确保占满父容器宽度，不影响高度计算 */
margin: 0;
padding: 0;
/* ✅ 滚动行为移至此处 */
overflow-y: auto;
max-height: 100px; /* 可根据设计调整，例如 200px 或 calc(5 * 30px) */
}
⚠️ 注意事项
- 避免在 .dropdown 上设置 height 或 min-height：这会强制约束高度，破坏 fit-content 的自适应逻辑；
-
- 的 height: 100% 是安全的
- max-height 建议设为合理值：例如 max-height: 200px 或 max-height: calc(6 * 30px)（预留 6 项空间），兼顾小屏体验与长列表可用性；
-
若需平滑滚动，可追加 scroll-behavior: smooth 到
- ；
-
无障碍提示：为
- 添加 role="listbox"，为
- 添加 role="option" 和 tabindex="0"，提升可访问性。
✅ 最终效果验证
无论列表包含 1 个还是 50 个
- ，下拉区域均：
- 初始高度 = 所有
- 总高度（含边框、间距）；
- 超出 max-height 后自动启用垂直滚动；
- 无多余空白或意外截断；
- 完全响应式，不依赖 JS 计算。
这才是符合现代 CSS 布局理念的、真正“内容驱动”的下拉菜单高度控制方案。
