Q:

Xamarin Forms Nested flex layout with other controls not rendering properly

I am trying to render a button inside nested FlexLayout, it's not getting resized automatically.
<ContentPage.Content>
    <StackLayout>
        <FlexLayout
            AlignItems="Center"
            Direction="Row">
            <StackLayout>
                <FlexLayout BackgroundColor="LightBlue" Direction="Column">
                    <Label FontSize="Medium" Text="Sample Test Column" />
                    <Label FontSize="Medium" Text="Sample Employee Column" />
                </FlexLayout>
            </StackLayout>
            <Button BackgroundColor="Green" Text="Submit" />
        </FlexLayout>
    </StackLayout>
</ContentPage.Content>

Which property to modify to render the green button as shown properly. I don't want to give any specific Width and Height it should automatically adjust according to text of button.

A:

Try to change FlexLayout.Grow="1" to your FlexLayout and remove the StackLayout like below:
<ContentPage.Content>
    <StackLayout>
        <FlexLayout
        AlignItems="Center"
        Direction="Row">
            <FlexLayout  FlexLayout.Grow="1" BackgroundColor="LightBlue" Direction="Column" >
                    <Label FontSize="Medium" Text="Sample Test Column" />
                    <Label FontSize="Medium" Text="Sample Employee Column" />
                </FlexLayout>

            <Button  BackgroundColor="Green" Text="Submit" />
        </FlexLayout>
    </StackLayout>
</ContentPage.Content>

