FlexLayout inside ScrollView not scrolling correctly on iPhone 8 Plus

[kellymmcd]

Description

I am experiencing an issue with a FlexLayout inside a ScrollView on an iPhone 8 Plus. The layout does not scroll as expected, although it works fine on other devices. This issue did not occur in my previous Xamarin app.

Steps to Reproduce

1. Create a new .NET MAUI project.

2. Add the following XAML code to a ContentPage

   <ContentPage.Resources>
    <ResourceDictionary>
        <Style TargetType="VerticalStackLayout">
            <Setter Property="Margin" Value="5"/>
            <Setter Property="Padding" Value="0, 5, 0, 5"/>
            <Setter Property="HeightRequest" Value="120"/>
            <Setter Property="WidthRequest" Value="120"/>
        </Style>
    </ResourceDictionary>
   </ContentPage.Resources>
   
   <Grid>
    <ScrollView>
        <FlexLayout Wrap="Wrap"
                    AlignItems="Start"
                    JustifyContent="SpaceEvenly"
                    HorizontalOptions="Center"
                    VerticalOptions="Fill">
   
            <VerticalStackLayout BackgroundColor="Red"/>
   
            <VerticalStackLayout BackgroundColor="Yellow"/>
   
            <VerticalStackLayout BackgroundColor="Green"/>
   
            <VerticalStackLayout BackgroundColor="Blue"/>
   
            <VerticalStackLayout BackgroundColor="Black"/>
   
            <VerticalStackLayout BackgroundColor="Pink"/>
   
            <VerticalStackLayout BackgroundColor="Red"/>
   
            <VerticalStackLayout BackgroundColor="Yellow"/>
   
            <VerticalStackLayout BackgroundColor="Green"/>
   
            <VerticalStackLayout BackgroundColor="Blue"/>
   
            <VerticalStackLayout BackgroundColor="Black"/>
   
            <VerticalStackLayout BackgroundColor="Pink"/>
   
            <VerticalStackLayout BackgroundColor="Red"/>
   
            <VerticalStackLayout BackgroundColor="Yellow"/>
   
            <VerticalStackLayout BackgroundColor="Green"/>
   
            <VerticalStackLayout BackgroundColor="Blue"/>
   
            <VerticalStackLayout BackgroundColor="Black"/>
   
            <VerticalStackLayout BackgroundColor="Pink"/>
   
        </FlexLayout>
    </ScrollView>
   </Grid>

3. Run the app on an iPhone 8 simulator, only able to scroll part way down the page.

Link to public reproduction project repository

No response

Version with bug

8.0.90 SR9

Is this a regression from previous behavior?

Yes, this used to work in Xamarin.Forms

Last version that worked well

Unknown/Other

Affected platforms

iOS

Affected platform versions

iOS 16.4 (iPhone 8 plus)

Did you find any workaround?

No response

Relevant log output

No response

[github-actions[bot]]

Hi I'm an AI powered bot that finds similar issues based off the issue title.

Please view the issues below to see if they solve your problem, and if the issue describes your problem please consider closing this one and thumbs upping the other issue to help us prioritize it. Thank you!

Closed similar issues:

• FlexLayout doesn't scroll. | MAUI.NET USING .NET 8 (#20890), similarity score: 0.83
• ScrollView not working when inside a VerticalStackLayout (#14209), similarity score: 0.81
• The views overlap and ScrollView Scroll does not work when FlexLayout is child (#5091), similarity score: 0.81
• FlexLayout inside of an ScrollView doesn't scroll on iOS (#10256), similarity score: 0.80
• FlexLayout inside ScrollView doesn't size correctly (#5755), similarity score: 0.80

Note: You can give me feedback by thumbs upping or thumbs downing this comment.

[ninachen03]

This issue has been verified using Visual Studio 17.12.0 Preview 3.0 (8.0.92 & 8.0.82). Can repro it on iOS 16.4 (iPhone 8 plus), but works fine on iOS 17.5