Component

Other...

Package version

3.0.0-rc.15

@microsoft/fast-element version

2.10.4

Environment

System:
    OS: Linux 5.0 undefined
    CPU: (8) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Memory: 0 Bytes / 0 Bytes
    Shell: 1.0 - /bin/jsh
  npmPackages:
    @fluentui/web-components: ^3.0.0-rc.15 => 3.0.0-rc.15 
    @microsoft/fast-element: ^2.10.4 => 2.10.4

Current Behavior

When the dropbox is in multi select mode and client uses white-space: nowrap in their environment, the dropbox cannot handle text overflow or text wrap when selected options length exceeds that of the container. The trigger gets pushed outside of the visible area:

Expected Behavior

Dropbox should allow any contents of any size to be inserted into the dropbox and and constrain overflow.

Reproduction

https://stackblitz.com/edit/vitejs-vite-6ewgnjgd?file=src%2Fmain.js&terminal=dev

Steps to reproduce

go to stackblitz, read the description from top to bottom to see reproduction. No additional steps required.

Are you reporting an Accessibility issue?

None

Suggested severity

Urgent - No workaround and Products/sites are affected

Products/sites affected

No response

Are you willing to submit a PR to fix?

yes

Validations

• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• The provided reproduction is a minimal reproducible example of the bug.