Why nested FlexLayout is not visible in this case?

Question

Code:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:FlexLayout2"
             x:Class="FlexLayout2.MainPage">

    <FlexLayout
        Direction="Column"
        JustifyContent="Start"
        AlignItems="Stretch">
        <FlexLayout
            Direction="Row"
            JustifyContent="Start"
            AlignItems="Stretch">
            <BoxView Color="Red"/>
            <BoxView Color="Black"/>
        </FlexLayout>

        <BoxView Color="Yellow"/>

    </FlexLayout>

</ContentPage>

What I got: Image

What I expected: Image

Question says it all. What I am missing ?

Xamarin Forms 3.2

Answer 1

If you place your child flex layout inside <ContentView> it will work:

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:FlexLayout2"
             x:Class="FlexLayout2.MainPage">

    <FlexLayout
        Direction="Column"
        JustifyContent="Start"
        AlignItems="Stretch">
        <ContentView>
            <FlexLayout
                Direction="Row"
                JustifyContent="Start"
                AlignItems="Stretch">
                <BoxView Color="Red"/>
                <BoxView Color="Black"/>
            </FlexLayout>
        </ContentView>
        <BoxView Color="Yellow"/>
    </FlexLayout>
</ContentPage>