Fluent UI v9 Select下拉框内容无法滚动问题求助

问题描述 #

在Word插件的Angular应用中使用Fluent UI Web Components v9，其余组件功能正常，但FluentSelect存在异常：当下拉菜单展开且选项过多无法在屏幕内完全显示时，下拉内容无法滚动，底部选项不可见，反而主内容区域出现滚动。已移除所有自定义样式，问题仍未解决。

排查与解决过程 #

通过开发者控制台对比CodePen示例发现，项目中未设置--max-heightCSS变量，而示例中已配置该变量。手动添加全局CSS后问题得以解决。

解决代码 #

CSS配置

:root {
  --max-height: 200px;
}

对应HTML代码

<fluent-select title="Select a section">
  <fluent-option value="1">Beginning</fluent-option>
  <fluent-option value="2">Middle</fluent-option>
  <fluent-option value="3">End</fluent-option>
  <fluent-option value="1">Beginning</fluent-option>
  <fluent-option value="2">Middle</fluent-option>
  <fluent-option value="3">End</fluent-option>
  <fluent-option value="1">Beginning</fluent-option>
  <fluent-option value="2">Middle</fluent-option>
  <fluent-option value="3">End</fluent-option>
  <fluent-option value="1">Beginning</fluent-option>
  <fluent-option value="2">Middle</fluent-option>
  <fluent-option value="3">End</fluent-option>
</fluent-select>

原因说明 #

Fluent UI Web Components v9的FluentSelect组件依赖--max-height变量来限制下拉面板的高度。当该变量未定义时，下拉面板会自适应内容高度无限延伸，超出视口范围时，浏览器会触发页面主区域滚动，而非下拉面板内部滚动。

CodePen示例默认包含了该变量的配置，但Word插件的Angular环境可能未自动引入组件的基础样式变量集合，因此需要手动设置。这并非临时解决方案，而是组件正常运行的必要配置，你可以根据需求调整200px为合适的高度值（比如300px或calc(100vh - 80px)这类动态值）。

内容的提问来源于stack exchange，提问作者Boland