MaximumWidthRequest in FlexLayout is not working on macOS or iOS

Description

The MaximumWidthRequest property on the FlexLayout should request a maximum width. On Windows, it works the way I’d expect it to. It doesn’t seem to work at all on macOS. I confirmed this is an issue on both Intel and M2 Macs, and according to @jknaudt21’s comment it’s also an issue on iOS.

Button BorderColor property is also not working correctly.

MAUI version:

% dotnet workload list

Installed Workload Id      Manifest Version      Installation Source
--------------------------------------------------------------------
maui-maccatalyst           7.0.59/7.0.100        SDK 7.0.200        
maui-ios                   7.0.59/7.0.100        SDK 7.0.200        
maui-android               7.0.59/7.0.100        SDK 7.0.200 

Here’s an example. This XAML code renders 16 buttons with WidthRequest=“100” inside a FlexLayout with MaximumWidthRequest=“400”:

     <FlexLayout Wrap="Wrap" MaximumWidthRequest="400">
       <Button BackgroundColor="LightBlue" BorderColor="Black" HeightRequest="100" WidthRequest="100" FontSize="60" />
       <Button BackgroundColor="LightBlue" BorderColor="Black" HeightRequest="100" WidthRequest="100" FontSize="60" />
       <Button BackgroundColor="LightBlue" BorderColor="Black" HeightRequest="100" WidthRequest="100" FontSize="60" />
       <Button BackgroundColor="LightBlue" BorderColor="Black" HeightRequest="100" WidthRequest="100" FontSize="60" />
       <Button BackgroundColor="LightBlue" BorderColor="Black" HeightRequest="100" WidthRequest="100" FontSize="60" />
       <Button BackgroundColor="LightBlue" BorderColor="Black" HeightRequest="100" WidthRequest="100" FontSize="60" />
       <Button BackgroundColor="LightBlue" BorderColor="Black" HeightRequest="100" WidthRequest="100" FontSize="60" />
       <Button BackgroundColor="LightBlue" BorderColor="Black" HeightRequest="100" WidthRequest="100" FontSize="60" />
       <Button BackgroundColor="LightBlue" BorderColor="Black" HeightRequest="100" WidthRequest="100" FontSize="60" />
       <Button BackgroundColor="LightBlue" BorderColor="Black" HeightRequest="100" WidthRequest="100" FontSize="60" />
       <Button BackgroundColor="LightBlue" BorderColor="Black" HeightRequest="100" WidthRequest="100" FontSize="60" />
       <Button BackgroundColor="LightBlue" BorderColor="Black" HeightRequest="100" WidthRequest="100" FontSize="60" />
       <Button BackgroundColor="LightBlue" BorderColor="Black" HeightRequest="100" WidthRequest="100" FontSize="60" />
       <Button BackgroundColor="LightBlue" BorderColor="Black" HeightRequest="100" WidthRequest="100" FontSize="60" />
       <Button BackgroundColor="LightBlue" BorderColor="Black" HeightRequest="100" WidthRequest="100" FontSize="60" />
       <Button BackgroundColor="LightBlue" BorderColor="Black" HeightRequest="100" WidthRequest="100" FontSize="60" />
     </FlexLayout>

On Windows this renders exactly the way I expect it to:

When I resize the window so it’s smaller than 400 wide, the buttons wrap as expected.

On macOS using Visual Studo 17.6 Preview (17.6 build 402) installed on clean machine, it looks like this:

The MaximumWidthRequest property seems to be ignored, and the buttons wrap as if it’s not there.

Also, it looks like the BorderColor="Black" property in the buttons is being ignored.

Steps to Reproduce

1. Create a new .NET MAUI app in macOS on an M1 or M2 Mac
2. Paste the XAML from the description into MainPage.xaml
3. Run the app

Link to public reproduction project repository

https://github.com/andrewstellman/reproduce-maui-bug

Version with bug

7.0 (current)

Last version that worked well

Unknown/Other

Affected platforms

macOS

Affected platform versions

macOS 13.2.1 (22D68)

Did you find any workaround?

No, sadly.

Relevant log output

No response

[andrewstellman]

Unfortunately, I haven’t found a workaround. 😢 Hopefully this bug will get fixed soon!

[jknaudt21]

Adding more to the discussion, it seems that iOS is also affected by this bug. The flex layout doesn’t seem “right”: .

I’m also creating a separate issue to track the issues with the borders not displaying correctly. See: https://github.com/dotnet/maui/issues/13612