Nested ScrollViewers Problem

Hi All,

I have a ScrollViewer that is nested within a Grid, which is nested within another ScrollViewer:

I have a WrapPanel nested within the inner ScrollViewer, with several buttons within the WrapPanel.

The desired behavior is for the buttons within the inner ScrollViewer to realign themselves vertically
within the WrapPanel when the window is made narrower in width. Also, when the window is made
narrower to the point that it is too narrow to fully display the widest element within the window,
then a horizontal scrollbar is displayed.

The problem is that, when I set the HorizontalScrollBarVisibility="Auto" on the outer ScrollViewer,
the whole layout is messed up.

This is my XAML:

<Window x:Class="Wpf_test_App_01.z32_Test_Window_01"
        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:local="clr-namespace:Wpf_test_App_01"
        mc:Ignorable="d"
        Title="z32_Test_Window_01" Height="333" Width="744"><!--<StackPanel
               Width="{Binding ActualWidth,
                                    RelativeSource={RelativeSource 
                                                    Mode=FindAncestor, AncestorType=Window}}"
               Background="DarkOrange" >--><DockPanel
               MinWidth="222"
               Background="DarkOrange" ><!--
                    HorizontalAlignment="Stretch"
                    VerticalAlignment="Stretch"

                if this is introduced, it messes up the layout:
                    HorizontalScrollBarVisibility="Auto"
            --><ScrollViewer Name="ScrollVwr_for_main_content"
                    VerticalScrollBarVisibility="Auto"
                    Background="DarkGreen" ><Grid  Name="main_testwindow_grid"><Grid.ColumnDefinitions><ColumnDefinition Width="*"/></Grid.ColumnDefinitions><Grid.RowDefinitions><RowDefinition Height="2*" /><RowDefinition Height="6*" /><RowDefinition Height="4*" /></Grid.RowDefinitions><StackPanel
                    Grid.Row="0"  Grid.Column="0"
                    HorizontalAlignment="Stretch"
                    VerticalAlignment="Stretch"
                    Width="333"
                    Background="DarkCyan"><TextBlock Background="LightBlue"
                               Height="44"  Width="322"
                               FontSize="18">this is some stuff within a text block</TextBlock></StackPanel><ScrollViewer Background="#FF270627" Name="ScrollVwr_for_file_buttons"
                    Grid.Row="1"  Grid.Column="0"
                    HorizontalScrollBarVisibility="Disabled"
                    VerticalScrollBarVisibility="Auto"
                    MaxHeight="222"  Height="99"
                    Width="Auto"
                    HorizontalAlignment="Stretch"
                    VerticalAlignment="Stretch"
                    GotFocus="ScrollVwr_for_main_content_GotFocus"><WrapPanel Name="wrappanel_file_buttons"
                    Width="Auto"
                    Height="Auto"
                    HorizontalAlignment="Stretch"
                    VerticalAlignment="Stretch"
                            Background="BlueViolet"><Button Background="Aquamarine" Height="Auto" Width="Auto"
                            Margin="4" Padding="4" FontSize="20">Button 0001</Button><Button Background="Aquamarine" Height="Auto" Width="Auto"
                            Margin="4" Padding="4" FontSize="20">Button 0002</Button><Button Background="Aquamarine" Height="Auto" Width="Auto"
                            Margin="4" Padding="4" FontSize="20">Button 0003</Button><Button Background="Aquamarine" Height="Auto" Width="Auto"
                            Margin="4" Padding="4" FontSize="20">Button 0004</Button><Button Background="Aquamarine" Height="Auto" Width="Auto"
                            Margin="4" Padding="4" FontSize="20">Button 0005</Button><Button Background="Aquamarine" Height="Auto" Width="Auto"
                            Margin="4" Padding="4" FontSize="20">Button 0006</Button><Button Background="Aquamarine" Height="Auto" Width="Auto"
                            Margin="4" Padding="4" FontSize="20">Button 0007</Button><Button Background="Aquamarine" Height="Auto" Width="Auto"
                            Margin="4" Padding="4" FontSize="20">Button 0008</Button><Button Background="Aquamarine" Height="Auto" Width="Auto"
                            Margin="4" Padding="4" FontSize="20">Button 0009</Button><Button Background="Aquamarine" Height="Auto" Width="Auto"
                            Margin="4" Padding="4" FontSize="20">Button 0010</Button><Button Background="Aquamarine" Height="Auto" Width="Auto"
                            Margin="4" Padding="4" FontSize="20">Button 0011</Button><Button Background="Aquamarine" Height="Auto" Width="Auto"
                            Margin="4" Padding="4" FontSize="20">Button 0012</Button></WrapPanel></ScrollViewer><!--Width="{Binding ActualWidth,
                                    RelativeSource={RelativeSource 
                                                    Mode=FindAncestor, AncestorType=Window}}"--><StackPanel
                    Grid.Row="2"  Grid.Column="0"
                    Width="444"  Height="88"
                    Background="DarkCyan"><TextBlock Background="LightBlue"
                               Height="77"  Width="422"
                               FontSize="18">this is some stuff within a text block at the bottom</TextBlock></StackPanel></Grid></ScrollViewer></DockPanel></Window>

When I resize the height of the window, the vertical scrollbar shows up as desired.

It's the horizontal scrollbar that I want to get when the window is made narrower
(to the point that it is too narrow to fully display the widest element within it --- which would
be the StackPanel/TextBlock in the bottom grid row in this case).

Any help with this would be appreciated.

THANKS!

Wally