FlexLayout Wrap Misalignment with Dynamically-Sized Buttons in .NET MAUI #30957

Description

In .NET MAUI, when using a FlexLayout with Wrap="true" and placing Button controls within it, the layout does not consistently wrap elements as expected. Under certain conditions—such as runtime property changes that subtly affect the button size—the layout places buttons unevenly, stacking one on top of the other rather than continuing horizontally.

A reproducible scenario involves modifying the FontFamily of buttons dynamically, which leads to subtle dimension shifts. These micro-adjustments disrupt the wrap logic, causing buttons to stack vertically in an unintended one-above-another fashion, despite sufficient horizontal space.

This issue highlights a sensitivity in FlexLayout’s wrap calculation algorithm when handling controls that experience dynamic resizing during runtime.

Steps to Reproduce

FlexLayoutSample.zip

1. Create a new .NET MAUI app.
2. In the MainPage.xaml, add a FlexLayout with Wrap="true" and horizontal.
3. Add multiple Button controls inside the FlexLayout, and bind their FontFamily and Text to a toggleable state.
4. Run the app and click the buttons repeatedly.
5. Observe the layout: As font toggles and button sizes change subtly, the FlexLayout may stack buttons vertically instead of wrapping properly—even when horizontal space is available.

Link to public reproduction project repository

No response

Version with bug

10.0.0-preview.6

Is this a regression from previous behavior?

Not sure, did not test other versions

Last version that worked well

No response

Affected platforms

I was not able test on other platforms

Affected platform versions

Windows

Did you find any workaround?

No response

Relevant log output