Xamarin Forms Flex Layout sizing issue - xaml

Question

In my Xamarin Forms app I need to have a flex layout inside another flex layout. This is because:
I need to have two columns in my app - one that takes up 80% of the screen and the other that takes up 20% of the screen. I use a FlexLayout with two children having the FlexLayout.Basis property set for this.
In one of the columns I need to display a series of views so they wrap to fill the available space. I use a FlexLayout set to Wrap to achieve this.
Below this layout I need to display some other controls.
My issue is that the FlexLayout containing the wrapped controls does not adjust its height accurately and the 'bottom' controls encroach on the wrapped layout. This is an example of the problem (in Android):
Label11 has been obscured by the button. The red border is the border of the FlexLayout in the Android UI Automator Viewer. The height does not appear to adjust in accordance with the controls that have been added.
If I remove the 'Right Button' column and therefore don't need the flex basis properties it sizes accurately. I think the FlexLayout containing the wrapped controls does not take account of the fact it is in a column that has been set to 80% width - it appears to base its height as if it was taking up the entire width of the screen. Does anyone know a way to get around this?
Here is the xaml to reproduce the problem:
<?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:FlexLayoutProb"
x:Class="FlexLayoutProb.MainPage">
<StackLayout HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand"
AutomationId="stackLayoutTop">
<FlexLayout
AutomationId="FlexLayoutTop"
HorizontalOptions="FillAndExpand"
VerticalOptions="Start"
>
<StackLayout AutomationId="stackLayoutLeft" FlexLayout.Basis="80%" HorizontalOptions="FillAndExpand" >
<FlexLayout
AutomationId="FlexLayoutCtrls"
HorizontalOptions="FillAndExpand"
VerticalOptions="Start"
Wrap="Wrap" BackgroundColor="LightGreen"
>
<Label HeightRequest="50" WidthRequest="100" Margin="5" BackgroundColor="LightCyan" Text="Label1"></Label>
<Label HeightRequest="50" WidthRequest="100" Margin="5" BackgroundColor="LightCyan" Text="Label2"></Label>
<Label HeightRequest="50" WidthRequest="100" Margin="5" BackgroundColor="LightCyan" Text="Label3"></Label>
<Label HeightRequest="50" WidthRequest="100" Margin="5" BackgroundColor="LightCyan" Text="Label4"></Label>
<Label HeightRequest="50" WidthRequest="100" Margin="5" BackgroundColor="LightCyan" Text="Label5"></Label>
<Label HeightRequest="50" WidthRequest="100" Margin="5" BackgroundColor="LightCyan" Text="Label6"></Label>
<Label HeightRequest="50" WidthRequest="100" Margin="5" BackgroundColor="LightCyan" Text="Label7"></Label>
<Label HeightRequest="50" WidthRequest="100" Margin="5" BackgroundColor="LightCyan" Text="Label8"></Label>
<Label HeightRequest="50" WidthRequest="100" Margin="5" BackgroundColor="LightCyan" Text="Label9"></Label>
<Label HeightRequest="50" WidthRequest="100" Margin="5" BackgroundColor="LightCyan" Text="Label10"></Label>
<Label HeightRequest="50" WidthRequest="100" Margin="5" BackgroundColor="LightCyan" Text="Label11"></Label>
</FlexLayout>
</StackLayout>
<StackLayout AutomationId="stackLayoutRight" FlexLayout.Basis="20%" HorizontalOptions="FillAndExpand">
<Button Text="Right Button" HorizontalOptions="FillAndExpand"></Button>
</StackLayout>
</FlexLayout>
<Button Text="Bottom Button"></Button>
</StackLayout>
</ContentPage>

Answer 1

Thanks to Harold Harvey who helped me solve this. This is what he suggested:
It looks like this issue is related to an existing bug posted to the Xamarin forms team. It is currently open and being investigated.
https://github.com/xamarin/Xamarin.Forms/issues/4875
The bug basically states that when a layout dynamically adds/removes children then the parent isn't being notified by the the height change. So, as a workaround I would offer this solution
<?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:FlexLayoutProb"
x:Class="FlexLayoutProb.MainPage">
<StackLayout HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand"
AutomationId="stackLayoutTop">
<FlexLayout
AutomationId="FlexLayoutTop"
HorizontalOptions="FillAndExpand"
VerticalOptions="Start"
>
<StackLayout
AutomationId="stackLayoutLeft"
FlexLayout.Basis="80%"
HorizontalOptions="FillAndExpand"
HeightRequest="{Binding Height, Source={x:Reference FlexLayoutCtrls}}">
<FlexLayout
x:Name="FlexLayoutCtrls"
AutomationId="FlexLayoutCtrls"
HorizontalOptions="FillAndExpand"
VerticalOptions="Start"
Wrap="Wrap" BackgroundColor="LightGreen"
>
<Label HeightRequest="50" WidthRequest="100" Margin="5" BackgroundColor="LightCyan" Text="Label1"></Label>
<Label HeightRequest="50" WidthRequest="100" Margin="5" BackgroundColor="LightCyan" Text="Label2"></Label>
<Label HeightRequest="50" WidthRequest="100" Margin="5" BackgroundColor="LightCyan" Text="Label3"></Label>
<Label HeightRequest="50" WidthRequest="100" Margin="5" BackgroundColor="LightCyan" Text="Label4"></Label>
<Label HeightRequest="50" WidthRequest="100" Margin="5" BackgroundColor="LightCyan" Text="Label5"></Label>
<Label HeightRequest="50" WidthRequest="100" Margin="5" BackgroundColor="LightCyan" Text="Label6"></Label>
<Label HeightRequest="50" WidthRequest="100" Margin="5" BackgroundColor="LightCyan" Text="Label7"></Label>
<Label HeightRequest="50" WidthRequest="100" Margin="5" BackgroundColor="LightCyan" Text="Label8"></Label>
<Label HeightRequest="50" WidthRequest="100" Margin="5" BackgroundColor="LightCyan" Text="Label9"></Label>
<Label HeightRequest="50" WidthRequest="100" Margin="5" BackgroundColor="LightCyan" Text="Label10"></Label>
<Label HeightRequest="50" WidthRequest="100" Margin="5" BackgroundColor="LightCyan" Text="Label11"></Label>
</FlexLayout>
</StackLayout>
<StackLayout AutomationId="stackLayoutRight" FlexLayout.Basis="20%" HorizontalOptions="FillAndExpand">
<Button Text="Right Button" HorizontalOptions="FillAndExpand"></Button>
</StackLayout>
</FlexLayout>
<Button Text="Bottom Button"></Button>
</StackLayout>
</ContentPage>
The new lines are:
HeightRequest="{Binding Height, Source={x:Reference FlexLayoutCtrls}}"
x:Name="FlexLayoutCtrls"
I have tested this on UWP,iOS, and Android and it behaves as you would expect.
Since the FlexLayout is being resized correctly, this will pass the correctly height to the parent StackLayout.