[Bug]: Regression - childrenGap on Stack with wrap breaks layout

[stefan-schweiger]

Library

React / v8 (@fluentui/react)

System Info

System:
    OS: macOS 13.0
    CPU: (10) arm64 Apple M1 Pro
    Memory: 1.13 GB / 32.00 GB
    Shell: 5.8.1 - /bin/zsh
  Browsers:
    Chrome: 107.0.5304.110
    Firefox: 100.0.2
    Safari: 16.1

Are you reporting Accessibility issue?

no

Reproduction

https://codesandbox.io/s/laughing-architecture-f92pyg?file=/src/ActionBar.tsx

Bug Description

As far as I can tell since v8.97 using wrap on a Stack with childrenGap breaks the layout and does not apply the correct gap. Sometimes it works on the first page load but if you press reload (in the code sandbox use the one of the integrated preview not your browser reload) it breaks.

Actual Behavior

Expected Behavior

A stack with wrap and childrenGap should render correctly:

Logs

No response

Requested priority

Normal

Products/sites affected

No response

Are you willing to submit a PR to fix?

no

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.

[ling1726]

• @fluentui/[email protected] https://codesandbox.io/s/happy-platform-rdm2ul?file=/src/ActionBar.tsx
• @fluentui/[email protected] https://codesandbox.io/s/amazing-pond-3891hc?file=/src/ActionBar.tsx

The exact version the regression occurred seems to be 8.97.2

[ling1726]

However the only change (according to the changelog) that seems to have gone in is a patch #25052

@sopranopillow do you know if your PR might have caused this regression?

[sopranopillow]

@ling1726 I doubt it, if it was that change both the wrap and no-wrap versions should have the issue. I'll take a look and see if that change caused it.

[sopranopillow]

After looking into it, it does seem to be the root cause. I can take the issue!