Why is FlexLayout not scrolling?

Question

Consider the two .NET MAUI (Android) pages below:

Page 1:

<ContentPage ...>

    <ScrollView>
        <VerticalStackLayout>
            <Label Text="The good movie 1" FontSize="40" WidthRequest="140" />
            <Label Text="The good movie 2" FontSize="40" WidthRequest="140" />
            <Label Text="The good movie 3" FontSize="40" WidthRequest="140" />
            <Label Text="The good movie 4" FontSize="40" WidthRequest="140" />
            <Label Text="The good movie 5" FontSize="40" WidthRequest="140" />
            <Label Text="The good movie 6" FontSize="40" WidthRequest="140" />
            <Label Text="The good movie 7" FontSize="40" WidthRequest="140" />
            <Label Text="The good movie 8" FontSize="40" WidthRequest="140" />
            <Label Text="The good movie 9" FontSize="40" WidthRequest="140" />
            <Label Text="The good movie 10" FontSize="40" WidthRequest="140" />
            <Label Text="The good movie 11" FontSize="40" WidthRequest="140" />
            <Label Text="The good movie 12" FontSize="40" WidthRequest="140" />
        </VerticalStackLayout>
    </ScrollView>

</ContentPage>

Page 2:

<ContentPage ...>

    <ScrollView>
        <FlexLayout Direction="Row" Wrap="Wrap" JustifyContent="SpaceEvenly">
            <Label Text="The good movie 1" FontSize="40" WidthRequest="140" />
            <Label Text="The good movie 2" FontSize="40" WidthRequest="140" />
            <Label Text="The good movie 3" FontSize="40" WidthRequest="140" />
            <Label Text="The good movie 4" FontSize="40" WidthRequest="140" />
            <Label Text="The good movie 5" FontSize="40" WidthRequest="140" />
            <Label Text="The good movie 6" FontSize="40" WidthRequest="140" />
            <Label Text="The good movie 7" FontSize="40" WidthRequest="140" />
            <Label Text="The good movie 8" FontSize="40" WidthRequest="140" />
            <Label Text="The good movie 9" FontSize="40" WidthRequest="140" />
            <Label Text="The good movie 10" FontSize="40" WidthRequest="140" />
            <Label Text="The good movie 11" FontSize="40" WidthRequest="140" />
            <Label Text="The good movie 12" FontSize="40" WidthRequest="140" />
        </FlexLayout>
    </ScrollView>

</ContentPage>

In Page 1, the text in the label is displayed entirely, and I can scroll to see all the labels.

But in Page 2, it seems like all the labels are shrunk to fit on the screen vertically, and only the beginning of the text on the label is displayed.

How can I get the text on the label to be displayed entirely and the screen to scroll with FlexLayout ?

+++++++ Added +++++++

This is what I get with only 4 labels.

It seems like they fill all the vertical space. What about ScrollView ?

please post screenshots illustrating the behavior you're questioning — Jason, Feb 09 '23 at 21:46
Seems to me that it "can't scroll" because they all fit. I mean, perhaps the real problem is "why don't multi-line labels in flexlayout get a height that shows all the text"? Looks to me like they are getting some DEFAULT height. To find out if this is what is happening, try some tests: Less of them, more of them. [The only fix I know is to set HeightRequest on Label, but that may not be what you want.] — ToolmakerSteve, Feb 09 '23 at 22:13
@acmoune just add HeightRequest="140" to your label, as that person told you, and you will see the effect. There is no such thing as Auto-fit for text. and considering the bugs we have even with the basics, I say forget about it for at least 2 more years. — H.A.H., Feb 09 '23 at 23:49

Alexandar May - MSFT · Accepted Answer · 2023-02-10T06:29:15.130

1

When Setting FlexLayout as the Child of ScrollView, the Content does not scroll. In conclusion, this is a known issue that being tracked in the link below, you can follow up there.

https://github.com/dotnet/maui/issues/5091

As an alternative workaround, you can use VerticalStackLayout ,StackLayout or Grid instead of FlexLayout like below:

<ScrollView>
        <StackLayout>
            
              \\\
        </StackLayout>
</ScrollView>

edited Feb 10 '23 at 06:29

answered Feb 10 '23 at 01:11

Alexandar May - MSFT

6,536
1
8
15

1

Ok, it is good to know that it is a known issue. I will use the `Grid` as an alternative. Thanks. – acmoune Feb 10 '23 at 06:24

Why is FlexLayout not scrolling?

1 Answers1