WPF ScrollViewer with webview2 Content Overlap other elements

<Window x:Class="wpfsamples.Test"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"   
        xmlns:wv2="clr-namespace:Microsoft.Web.WebView2.Wpf;assembly=Microsoft.Web.WebView2.Wpf"
        mc:Ignorable="d"
        Title="Test" 
                WindowStyle="None"
        ResizeMode="NoResize"
        WindowStartupLocation="CenterScreen"
        Background="Transparent"
        AllowsTransparency="True"
        Height="Auto"
        Width="Auto"
        SizeToContent="WidthAndHeight"
        WindowState="Normal"        
        >
    <Border CornerRadius="8" Padding="0" Width="1000" Height="800" x:Name="MainBorder">
        <Border.Background>
            <SolidColorBrush Color="LightYellow"></SolidColorBrush>
        </Border.Background>

        <Grid ShowGridLines="False" Name="grid" HorizontalAlignment="Stretch">

            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>

            <Grid.RowDefinitions>
                <RowDefinition Height="38"/>
                <RowDefinition Height="*"/>
                <RowDefinition Height="52"/>
            </Grid.RowDefinitions>


            <Border Background="#242424" CornerRadius="6" Margin="47,10" Width="282" Height="22" HorizontalAlignment="Left" VerticalAlignment="Center" Padding="5">
                <TextBlock LineHeight="16" TextAlignment="Center" FontSize="13" FontStyle="Normal" FontFamily="SF Pro Text" FontWeight="DemiBold" Text="Test Header" Grid.Column="0" Grid.Row="0">
                    <TextBlock.Foreground>
                        <SolidColorBrush Color="WhiteSmoke"></SolidColorBrush>
                    </TextBlock.Foreground>
                </TextBlock>
            </Border>



            <!--display the content panel-->
            <Border Background="#242424" Grid.Row="1" Grid.Column="0" Margin="8,0" CornerRadius="10" BorderThickness="1">
                <ScrollViewer                    
                      x:Name="scrollviewer" HorizontalScrollBarVisibility="Disabled" VerticalScrollBarVisibility="Auto">
                    <WrapPanel Background="Black" Margin="8" x:Name="panel">
                        <Border Background="White" Width="300" Margin="20" Height="300">
                            <wv2:WebView2 Source="https://google.com"></wv2:WebView2>
                        </Border>
                        <Border Background="White" Width="300" Margin="20" Height="300">
                            <wv2:WebView2 Source="https://google.com"></wv2:WebView2>
                        </Border>
                        <Border Background="White" Width="300" Margin="20" Height="300">
                            <wv2:WebView2 Source="https://google.com"></wv2:WebView2>
                        </Border>
                        <Border Background="White" Width="300" Margin="20" Height="300">
                            <wv2:WebView2 Source="https://google.com"></wv2:WebView2>
                        </Border>
                        <Border Background="White" Width="300" Margin="20" Height="300">
                            <wv2:WebView2 Source="https://google.com"></wv2:WebView2>
                        </Border>
                        <Border Background="White" Width="300" Margin="20" Height="300">
                            <wv2:WebView2 Source="https://google.com"></wv2:WebView2>
                        </Border>
                        <Border Background="White" Width="300" Margin="20" Height="300">
                            <wv2:WebView2 Source="https://google.com"></wv2:WebView2>
                        </Border>
                    </WrapPanel>
                </ScrollViewer>
            </Border>

            <!--display the toolbar-->
            <Border Grid.Row="2" x:Name="ToolbarBorder" Background="Black" CornerRadius="0,0,8,8" Margin="0,5,0,0" Padding="0">
                <Grid HorizontalAlignment="Stretch" x:Name="toolbar" ShowGridLines="False" >
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="auto"/>
                        <ColumnDefinition Width="*"/>
                        <ColumnDefinition Width="auto"/>
                        <ColumnDefinition Width="auto"/>
                        <ColumnDefinition Width="*"/>
                        <ColumnDefinition Width="auto"/>
                    </Grid.ColumnDefinitions>
                    <Button  Name="btn_showdevicelist" Foreground="White" Content="Start" Grid.Column="2" ToolTip="MyButton"  Background="Black" Width="64"  Height="32" VerticalAlignment="Bottom"  >

                    </Button>


                </Grid>
            </Border>

        </Grid>
    </Border>
</Window>

this is the entire code for the window, you can copy and run it, when i have many elements show in the border embed with webview2 and then when i scroll vertically, the content in the wrapper panel overlap the bottom toolbar .. but if i comment out the webview2, then there will be no issue. how to avoid this ?

the screencapture