Unexpected Stack Layout behavior in xamarin - xaml

Question

I have a StackLayout with a Frame, ScrollView & Button as it's child controls.
When the ScrollView content is beyond a certain Height, the ScrollView seems to push the Frame above it, squashing it. I would expect that the ScrollView as a container not push upwards the view above it, but contain its content within it.
Frame - red circle, ScrollView - Blue, ScrollView's content - light blue, Button - green
EXPECTED
<?xml version="1.0" encoding="UTF-8" ?>
<ContentPage
xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="Class">
<ContentPage.Content>
<StackLayout
VerticalOptions="FillAndExpand"
Orientation="Vertical">
<Frame
Padding="0"
HeightRequest="60"
WidthRequest="60"
VerticalOptions="Center"
HorizontalOptions="Center"
CornerRadius="30"
BackgroundColor="Red"/>
<ScrollView
Background="Blue"
VerticalOptions="FillAndExpand">
<StackLayout
Margin="20,5,20,0"
BackgroundColor="LightBlue"
HeightRequest="150"/>
</ScrollView>
<Button
VerticalOptions="End"
Text="Next"
BackgroundColor="Green"/>
</StackLayout>
</ContentPage.Content>
</ContentPage>
Ouputs (Which is what i expect):
Then if i change the ScrollView's StackLayout content's height to 950, it then squashes the content above and it looks as below:
Why is the ScrollView pushing upwards, even when the Frame has an assigned HeightRequest. How can i resolve this?

Answer 1

Why is the ScrollView pushing upwards, even when the Frame has an assigned HeightRequest.
From ScrollView as a child layout, a ScrollView will often be the child of a StackLayout. A ScrollView requires a specific height to compute the difference between the height of its content and its own height, with the difference being the amount that the ScrollView can scroll its content.
So you can assign specific height to Scrollview.
<StackLayout Orientation="Vertical" VerticalOptions="FillAndExpand">
<Frame
Padding="0"
BackgroundColor="Red"
CornerRadius="30"
HeightRequest="60"
HorizontalOptions="Center"
VerticalOptions="Center"
WidthRequest="60" />
<ScrollView
Background="Blue"
HeightRequest="150"
VerticalOptions="FillAndExpand">
<StackLayout
Margin="20,5,20,0"
BackgroundColor="LightBlue"
HeightRequest="950" />
</ScrollView>
<Button
BackgroundColor="Green"
Text="Next"
VerticalOptions="End" />
</StackLayout>
Another way is to use Gird to assign specific height for Scrollview.
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Frame
Padding="0"
BackgroundColor="Red"
CornerRadius="30"
HeightRequest="60"
HorizontalOptions="Center"
VerticalOptions="Center"
WidthRequest="60" />
<ScrollView
Grid.Row="1"
Background="Blue"
VerticalOptions="FillAndExpand">
<StackLayout
Margin="20,5,20,0"
BackgroundColor="LightBlue"
HeightRequest="950" />
</ScrollView>
<Button
Grid.Row="2"
BackgroundColor="Green"
Text="Next"
VerticalOptions="End" />
</Grid>