How can i do my <mat-card> doesn't expand when messages are displayed in Angular 9 - css

Question

I have my <mat-card> that has one form for the login of my page, the problem is when the error messages are displayed they change the size of the <mat-card> vertically and i need it to stay in the same size.
How can i do that?
Below i will let my html file , the sass file of the error messages and pictures of what I have
html file
<div class="bg">
<div class="main-div color ">
<mat-card class="z-depth center col-sm-4 " flex="50" >
<mat-radio-group aria-label="Select an option" [(ngModel)]="radio_btn">
<mat-radio-button [value]="true" >User</mat-radio-button>
<mat-radio-button [value]="false">Admin</mat-radio-button>
</mat-radio-group>
<div class="row justify-content-center " *ngIf="radio_btn==true;else form2">
<form class="example-form " [formGroup]="loginForm" (ngSubmit)="sendUser()">
<mat-form-field class="example-full-width ">
<input matInput formControlName="Identifier" placeholder="Identifier" >
</mat-form-field><br>
<div class=" alert-danger space" *ngIf="identifier.invalid && (identifier.dirty || identifier.touched)">
<div class="container-error-message " *ngIf="identifier.errors.required">
Identifier required
</div>
<div class="container-error-message" *ngIf="identifier.errors.minlength">
Identifier must be at least 7 characters long.
</div>
</div>
<br>
<mat-form-field class="example-full-width">
<input matInput formControlName="Password" placeholder="Password" type="password" >
</mat-form-field><br>
<div class="alert-danger space" *ngIf="password.invalid && (password.dirty || password.touched)">
<div class="container-error-message" *ngIf="password.errors.required">
Password required
</div>
<div class="container-error-message" *ngIf="password.errors.minlength">
Password must be at least 5 characters long.
</div>
</div>
<br>
<button mat-raised-button [class.black]="!loginForm.invalid" [disabled]="loginForm.invalid" type="submit">Sign in</button>
</form>
</div>
<ng-template #form2>
<app-home-admin></app-home-admin>
</ng-template>
</mat-card>
</div>
</div>
SASS file
#import './../../variables_scss/variables.scss';
example-icon {
padding: 0 14px;
}
.example-spacer {
flex: 1 1 auto;
}
.down{
overflow-y: auto;
.colour{
//background: #141519;
background: $orange-bg;
.icons {
color: $black;
}
}
}
.container{
align-items: center;
}
.main-div{
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
.center{
width: 75%;
margin: 10px auto;
.mat-radio-button ~ .mat-radio-button {
margin-left: 16px;
}
button {
display: block;
width: 100%;
margin: 2px;
text-align: center;
color: $orange !important;
border-radius: 8px;
}
}
}
.bg{
background: $black;
background: linear-gradient(to right, $dark_black,$light_black );
}
.behind{
z-index: 10;
}
.black {
background-color:$black !important;
}
.space{
margin: $margin-errors;
text-align: $text-align-center;
width: $width-erros;
border: 1px solid;
}
* scss_variables*
$dark_black: #1b1b1b;
$light_black: #424242;
$black: #141519;
$margin-left: auto;
$orange: #fc6407;
$colour_button :$black;
$orange-bg: linear-gradient(to right, #c43e00, #ff6f00);
$margin-errors: 0 auto;
$text-align-center: center;
$width-erros: 180px;

Answer 1

I am not able to replicate your issue with the code given by you. But i would suggest you to provide a constant height to mat-card which is sufficient to enclose all the items. Like i am taking 400px below:
mat-card {
height: 400px;
}

Answer 2

This is how i solve it
Adding this to the space class
max-height: 0px ;
margin-top: 0px !important;
Adding this to the center class
height: 290px;

Answer 3

You can add maximum height and minimum hight of card as same like this in your CSS file , it's worked for me, if you done like this then if the content size is height,automatically scroll will be apply without any size correction
.mat-card{
min-height: 230px ;
max-height: 230px ;
}