fix: FluentSelect inside overflow:auto container

[JamesNK]

🐛 Bug Report

I have a dialog that I've given a max height to. The dialog could contain a FluentSelect instance and the dialog body has a max height and scrolls when the height is exceeded:

#interactions-input-dialog .interaction-input-dialog {
    max-height: 50vh;
    overflow-y: auto;
}

When the FluentSelect opens, it opens inside the scrollable container, adding scrollbars and not being completely visible:

💻 Repro or Code Sample

🤔 Expected Behavior

I expect the FluentSelect to behave like a normal HTML select and open outside the scrollable element:

😯 Current Behavior

Opens inside the scrollable container, adding scrollbars and not being completely visible.

💁 Possible Solution

🔦 Context

🌍 Your Environment

• OS & Device: [e.g. MacOS, iOS, Windows, Linux] on [iPhone 7, PC]
• Browser [e.g. Microsoft Edge, Google Chrome, Apple Safari, Mozilla FireFox]
• .NET and Fluent UI Blazor library Version [e.g. 8.0.2 and 4.4.1]

[JamesNK]

How it should look (before changes to add a max height + overflow):

[vnbaaij]

If I just add a Select to one of our Dialog examples, it works as expected:

I actually can't get it to behave like what you have, even after adding the styles you used in your first post.

Are you sure you are setting the styles on the fluent-dialog-element?

We need a working, ready-to-run reproduction sample if you want us to investigate further.

[WenLiHou]

<div style="overflow-y:auto; display:flex;">
     <div style="width:100%; height:200px; background-color:lightgray;">
<FluentSelect TOption="string"      
              Height="300px">
              </FluentSelect>
     </div>
 </div>

you can try like this to reproduction... I am also troubled by this issue.

[vnbaaij]

@WenLiHou not really clear what you want us to do with that code

[JamesNK]

If I just add a Select to one of our Dialog examples, it works as expected:

I actually can't get it to behave like what you have, even after adding the styles you used in your first post.

Are you sure you are setting the styles on the fluent-dialog-element?

We need a working, ready-to-run reproduction sample if you want us to investigate further.

Did your dialog have overflow-y: auto;? Adding overflow and max height is what caused the issue.

[JamesNK]

JamesNK@d366979

Reopen please. I don't have permission.

[WenLiHou]

‌I tried using DeepSeek to find a solution, and I've found one.

/* 强制下拉框突破容器限制 */
  fluent-select::part(listbox) {
      position: absolute !important;
      z-index: 1000 !important;
      max-height: 200px;
      overflow-y: auto;
  }

  /* 修正滚动容器行为 */
  .scroll-container {
  }

  /* 临时解除滚动裁剪 */
  .scroll-container:has(fluent-select[open]) {
      overflow: visible !important;
  } ```

[vnbaaij]

I'm sorry, but I can't get it to work. @WenLiHou please post a complete working solution if you have one. Short blubs of code do not help here