Angular: Make div fill remaining horizontal space with opening and closing sidenav (Angular Materials)

Introduction

I have an page the presents a Angular Material sidenav that can open and close. I place that component in a div that also brings in a workspace component (varies depending on the page) that should take up the remaining space on the page. It needs to be dynamic in light of the fact the sidenav is able to open and close.

sidedraw.component.html

<div style="display: flex;">
  <mat-sidenav-container class="sidenav-container">
    <mat-sidenav
      class="sidenav"
      #sidenav
      mode="side"
      [(opened)]="isShown"
      (opened)="isShown = true"
      (closed)="isShown = false"
    >
      Sidenav content
    </mat-sidenav>
  
    <mat-sidenav-content>
        <p>
          <button class="toggleButton" mat-button (click)="sidenav.toggle()">
            <img *ngIf="isShown" src="../../../assets/icons/arrow-left.png" />
            <img *ngIf="!isShown" src="../../../assets/icons/arrow-right.png" />
          </button>
    </mat-sidenav-content>
  </mat-sidenav-container>
  <ng-container *ngComponentOutlet='workspaceComponent'></ng-container>
</div>

The workspaceComponent on the second last line is determined by:

sidedraw.component.ts

import { Component } from '@angular/core';
import { EstimatesworkspaceComponent } from 'src/app/workspaces/estimatesworkspace/estimatesworkspace.component';

@Component({
  selector: 'app-sidedraw',
  templateUrl: './sidedraw.component.html',
  styleUrls: ['./sidedraw.component.css'],
})
export class SidedrawComponent {
  isShown = true;
  workspaceComponent = EstimatesworkspaceComponent;
}

Later on I plan to make the workspaceComponent more dynamic but I am not there yet.

Problem

I can't get the workspaceComponent to fill the remainder of the page with no matter what I try.

My component template and relevant style sheets for now are as follows:

estimatesworkspace.component.html

<div class='request-container'> 
    Please enter the name of the business whose value you would like an estimate for
</div>

estimatesworkspace.component.css

.request-container {
    display: flex;
    flex-grow: 1;
    width: 100%;
    margin-top: 5%;
    text-align: center;
}

That code results in the following displayed:

I have tried display: flex and flex-grow: grow or flex-grow:1 everywhere I can think of and can't seem to get a solution. Any suggestions will be greatly appriciated.