FluentCard内FluentSelect列表项不显示问题求助（V4.0.0）

针对你在Microsoft.FluentUI.AspNetCore.Components V4.0.0中遇到的FluentSelect放在FluentCard内下拉列表无法正常显示的问题，以下是几个可行的解决办法：

1. 启用PortalMode渲染下拉菜单 #

FluentSelect组件提供了PortalMode属性，开启后下拉菜单会被渲染到DOM的根层级（而非Card内部），可以彻底避免父容器的样式限制，这也是官方针对此类嵌套问题的推荐方案。

示例代码：

<FluentCard>
    <FluentSelect PortalMode="true" @bind-Value="selectedValue">
        <FluentSelectItem Value="1">选项1</FluentSelectItem>
        <FluentSelectItem Value="2">选项2</FluentSelectItem>
        <FluentSelectItem Value="3">选项3</FluentSelectItem>
    </FluentSelect>
</FluentCard>

@code {
    private string selectedValue { get; set; } = "1";
}

2. 调整FluentCard的溢出属性 #

如果FluentCard默认的overflow: hidden样式裁剪了下拉内容，可以手动修改Card的溢出属性为visible：

示例代码：

<FluentCard Style="overflow: visible;">
    <FluentSelect @bind-Value="selectedValue">
        <FluentSelectItem Value="1">选项1</FluentSelectItem>
        <FluentSelectItem Value="2">选项2</FluentSelectItem>
    </FluentSelect>
</FluentCard>

3. 自定义CSS提升下拉菜单层级 #

如果是z-index层级导致下拉菜单被Card覆盖，可以通过自定义CSS提高下拉容器的层级：

在组件的<style>块中添加样式：

::deep .fluent-select__listbox {
    z-index: 1000 !important;
}

之后正常使用组件即可：

<FluentCard>
    <FluentSelect @bind-Value="selectedValue">
        <FluentSelectItem Value="1">选项1</FluentSelectItem>
        <FluentSelectItem Value="2">选项2</FluentSelectItem>
    </FluentSelect>
</FluentCard>

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