flexLayout div with full width - html

Question

I have a form this form takes up 1/3 of the screen adjacent to the left , so ı want to this form display with full width (occupy the entire screen from left to right.). I searched on google and tried some methods which are width : 100% , fxFlexFill, (fxLayout="column" fxLayoutAlign=" stretch"), fxFlexs .Maybe i used them wrong . I couldn't do it in any way.
calander page:
<form [formGroup]="userForm" (ngSubmit)="sendRequest()">
<div fxLayout="row" style="background-color: white">
<div fxLayout="column" fxFlex="10">
<mat-form-field appearance="fill">
<mat-label>Date</mat-label>
<input
matInput
#pick
[matDatepicker]="picker"
(dateInput)="OnDateChange(pick)"
[min]="todayDate"
[max]="maxDate"
readonly
/>
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
<mat-datepicker touchUi #picker [startAt]="todayDate"></mat-datepicker>
</mat-form-field>
</div>
<div fxLayout="column" fxFlex="15"></div>
<div fxLayout="column" fxFlex="30">
<mat-form-field appearance="fill">
<mat-label>Name</mat-label>
<input matInput formControlName="firstName" />
</mat-form-field>
</div>
<div fxLayout="column" fxFlex="15"></div>
<div fxLayout="column" fxFlex="30">
<mat-form-field appearance="fill">
<mat-label>Phone Number</mat-label>
<input matInput formControlName="phone" />
</mat-form-field>
</div>
<div></div>
</div>
<div fxLayout="row">
<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
<!-- hour Column -->
<ng-container matColumnDef="hour">
<th mat-header-cell *matHeaderCellDef>hour(90 min)</th>
<td mat-cell *matCellDef="let element">{{ element.hour }}</td>
</ng-container>
<!-- Position Column -->
<ng-container matColumnDef="position">
<th mat-header-cell *matHeaderCellDef>No.</th>
<td mat-cell *matCellDef="let element">{{ element.position }}</td>
</ng-container>
<!-- Checkbox Column -->
<ng-container matColumnDef="select">
<th mat-header-cell *matHeaderCellDef></th>
<td mat-cell *matCellDef="let row">
<mat-checkbox
(click)="$event.stopPropagation()"
*ngIf="row.statu == 'Open'"
(change)="$event ? selection.toggle(row) : null"
[checked]="selection.isSelected(row)"
>
</mat-checkbox>
</td>
</ng-container>
<!-- statu Column -->
<ng-container matColumnDef="statu">
<th mat-header-cell *matHeaderCellDef>statu</th>
<td mat-cell *matCellDef="let element">{{ element.statu }}</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr
mat-row
*matRowDef="let row; columns: displayedColumns"
(click)="selection.toggle(row)"
></tr>
</table>
</div>
<div>
<button mat-raised-button class="my-class" type="submit" color="accent">
Send
</button>
</div>
</form>
calander page css:
table {
width: 100%;
}
.example-form .mat-form-field + .mat-form-field {
margin-left: 8px;
}
.my-class{
margin-top: 10px;
width: 100%!important;
}
.mat-form-field-empty.mat-form-field-label {
color: green;
}
.mat-form-field-underline {
background-color: green;
}

Answer 1

What exactly should take up the whole screen? If you want the three input fields to stretch to the far right, you can change
<div fxLayout="row" style="background-color: white">
to
<div fxLayout="row" id="row" style="background-color: white; display: flex">

Answer 2

I think that could help you https://tburleson-layouts-demos.firebaseapp.com/#/docs
They said : "Using 'fxFill' to fill available width and height of parent container"
So ... you must have the size of the parent at 100%.