当窗口大小较小时，如何使侧边栏内容在主要内容上对齐到全宽

Question

我目前正在为一个项目制作主页，其中侧边栏提供对重要用户内容的快速访问，如下所示：

https://imgur.com/UpRL6Gv

但是，当窗口足够小时，我希望侧边栏能够捕捉到主要内容。现在，它只显示主内容面板：https://imgur.com/5SqltAn

我该怎么做？相关代码附在下面（文件的HTML和CSS），工具栏在另一个组件中。

@import '../../styles/variables';

.divider {
    width: 100%; 
    background-color: silver;
    height: 1px;
}

.main-container {
    display: flex; 
    flex-direction: row;
    min-height: 100%; 
    flex: 1;
    background-color: $primary-1;

    // MAIN CONTENT
    .main-content {
        display: flex; 
        flex-direction: column;
        flex: 1 0 800px;
        justify-content: center;
        margin: 5%;
        .payment-feed-container {
            display: flex; 
            flex-direction: column;
            flex: 0.9 0.9 500px;
            background-color: $primary-2;
            border-radius: 20px;
        }
    }
    .sidebar-button {    
        flex: 0 0 10px;
        background-color: $accent-2;
    }
    .sidebar-button:hover {
        background-color: $accent-4;
    }

    // SIDEBAR
    .sidebar-content{
        display: flex;
        flex-direction: column;
        min-height: 100%;
        flex: 0.2 0.2 350px; 
        background-color: $accent-3;
        justify-content: space-around;

        // global styles for sidebar 
        .mat-card {
            margin-left: 1%;
            margin-right: 1%;
        }
        .card-title-button-container {
            text-align: center;
            .card-title-button {
                font-size: 20px;
            }
            .card-title-button:hover {
                background-color: $accent-3; 
                color: #FEFEFA;
            }
        }
        // individual card styles
        .profile-card {
            flex: 0.2 0.25 0;
            .favorite-nonprofit {
                font-size: 15px;
            }
            .favorite-nonprofit:hover {
                background-color: $accent-4;
                color: $accent-1;
            }
            .more-button-container {
                text-align: center;
                .more-button {
                    background-color: $accent-3;
                    color: #FEFEFA;
                }
            }
        }  
        .friends-card {
            flex: 0.15 0.2 0;
            .badge-container {
                display: flex; 
                justify-content: space-around;
            }

        }  
        .progress-bar-card {
            flex: 0.15 0.2 0;
            .progress-bar {
                height: 12px;
            }
            .progress-bar-caption {
                font-style: italic;
            }
        }  
        .account-stats-card {
            flex: 0.15 0.2 0;
        }  
    }
}

<div class="main-container">
    <div class="main-content">
        <div class="payment-feed-container">
            Testtesttesttest            Testtesttesttest
            Testtesttesttest
            Testtesttesttest
            Testtesttesttest
            Testtesttesttest
            Testtesttesttest
            TesttesttesttestTesttesttesttestTesttesttesttestTesttesttesttestTesttesttesttest
        </div>
    </div>

    <div (click)="toggleSideNavOpened()" class="sidebar-button"></div>
    <div *ngIf="sidenavOpened" class="sidebar-content">
        <mat-card class="profile-card">
            <mat-card-header>
                <img (click)="navigateTo('profile')" mat-card-avatar src="{{getProfilePictureURL()}}"/>
                <mat-card-title>{{getUsername()}}</mat-card-title>
                <mat-card-subtitle>
                    <button (click)="navigateTo('profile')">Edit Profile</button>
                </mat-card-subtitle>
            </mat-card-header>
            <mat-divider></mat-divider>
            <mat-card-content>
                <mat-list dense>
                    <div mat-subheader>Your Favorite Nonprofits</div>
                    <div class="divider"></div>
                    <mat-list-item class="favorite-nonprofit" (click)="navigateToNonprofit(nonprofit)" *ngFor="let nonprofit of getFavoriteNonprofits().slice(0, 4)">
                        {{nonprofit}}
                        <mat-divider color="primary"></mat-divider>
                    </mat-list-item>
                </mat-list>
                <mat-card-actions class="more-button-container">
                    <button class="more-button" (click)="navigateTo('favorite-nonprofits')" mat-raised-button>More</button>
                </mat-card-actions>
            </mat-card-content>
        </mat-card>

        <mat-card class="friends-card">
            <mat-card-content class="badge-container">
                <!--TODO: Clicking on each individual badge should take you to friend's profile page-->
                <img *ngFor="let friend of getFriendsUsernames()" mat-card-avatar src="{{getFriendProfilePictureURL(friend)}}">   
            </mat-card-content>
            <mat-card-footer>
                <mat-card-title class="card-title-button-container">
                    <button class="card-title-button" (click)="navigateTo('friends')" mat-button>Your Friends</button>
                </mat-card-title>
            </mat-card-footer>
        </mat-card>

        <mat-card class="progress-bar-card">
            <mat-card-content>
                <mat-progress-bar class="progress-bar" mode="determinate" [value]="getProgressPercentage()" (click)="navigateTo('account-stats')"></mat-progress-bar>
                <h5 class="progress-bar-caption">${{getProgress()}} of ${{getGoal()}} donated.</h5>
            </mat-card-content>
            <mat-card-footer>
                <mat-card-title class="card-title-button-container">
                    <button class="card-title-button" (click)="navigateTo('account-stats')" mat-button>Your Goal Progress</button>
                </mat-card-title>
            </mat-card-footer>
        </mat-card>

        <mat-card class="account-stats-card">
            <mat-card-title class="card-title-button-container">
                <button class="card-title-button" (click)="navigateTo('account-stats')" mat-button>Other Account Stats</button>
            </mat-card-title>
        </mat-card>
    </div>
</div>