ScrollView messed up StackLayout

I am coding a Xamarin.Forms cross-platform Social Media app. I am trying to make it so on users' profiles you can scroll in case their feed goes below the page. I added a ScrollView except it messed up how it should be displayed, which displays perfectly without the ScrollView.

My code is

<ContentPage.Content>
        <ScrollView>
            <StackLayout>
                <Label Text=" "/>
                <Image Source="profile_icon.png" HeightRequest="60" />
                <Button x:Name="relation_button" Clicked="relation_button_Clicked"/>
                <StackLayout Grid.Row="1" Orientation="Horizontal" Spacing="0" HorizontalOptions="CenterAndExpand">
                    <Label x:Name="follower_count" TextColor="Black"/>
                    <Label x:Name="following_count" TextColor="Black"/>
                </StackLayout>
                <StackLayout Grid.Row="1" Orientation="Horizontal" Spacing="0" HorizontalOptions="CenterAndExpand">
                    <Label x:Name="display_name" Text="Loading..." FontSize="20" TextColor="Black" HorizontalOptions="CenterAndExpand"/>
                    <Label x:Name="name_space"/>
                    <Image x:Name="verified_image" HeightRequest="15"/>
                </StackLayout>
                <Label x:Name="bio" FontSize="10" Text="Loading..." TextColor="Black" HorizontalOptions="CenterAndExpand"/>
                <BoxView HeightRequest="1" WidthRequest="1" BackgroundColor="Black"></BoxView>
                <StackLayout x:Name="mainStackLayout">
                    <Label x:Name="loading_label" Text="Loading..." FontSize="20"/>
                </StackLayout>
        </StackLayout>
        </ScrollView>
    </ContentPage.Content>