Angular Material: Why does mat-form does not wrap the mat-hint inside? - angular-material

Question

I want my form fields to look right. However, the hint text of a first field intersects the second field below it and the text appears dirty. My goal is to separate these overlapping texts.But I haven't found a solution yet. How can I solve this problem?
I don't want the form to look like in the picture.
Edit: I'm using the method suggested on his Angular official site.
https://stackblitz.com/angular/lnkmogrbgry?file=app%2Fform-field-overview-example.ts
Edit 2:
userform.component.html
<div class="col-lg-8 mx-auto mt-5">
<mat-card class="fullbar">
<div class="card-header-bar">
New User Form!
</div>
<mat-card-content class="mt-3 card-content-bar">
<form [formGroup]="userGroup">
<mat-form-field class="full-width">
<input matInput placeholder="Username" formControlName="username">
<mat-hint>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent nibh dui, viverra quis lacinia
non, volutpat vel nisi. Donec fringilla, sem id vestibulum semper, diam ligula venenatis ligula, nec
malesuada nisi mi at lectus.
</mat-hint>
</mat-form-field>
<mat-form-field class="full-width">
<input matInput placeholder="Password" formControlName="password">
<mat-hint>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent nibh dui, viverra quis lacinia
non, volutpat vel nisi. Donec fringilla, sem id vestibulum semper, diam ligula venenatis ligula, nec
malesuada nisi mi at lectus.
</mat-hint>
</mat-form-field>
<mat-form-field class="full-width">
<input matInput placeholder="Age" formControlName="age">
<mat-hint>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent nibh dui, viverra quis lacinia
non, volutpat vel nisi. Donec fringilla, sem id vestibulum semper, diam ligula venenatis ligula, nec
malesuada nisi mi at lectus.
</mat-hint>
</mat-form-field>
</form>
</mat-card-content>
</mat-card>
</div>
userform.component.css
.fullbar {
padding: 0px;
margin: 0px;
margin-top: 75px;
margin-bottom: 225px;
}
.card-header-bar {
line-height: 50px;
height: 50px;
max-height: 50px;
vertical-align: middle;
padding-left: 15px;
color: rgba(0, 0, 0, .54);
background-color: #e7e5f7;
}
.card-content-bar {
padding: 15px;
}
.full-width {
width: 100%;
}

Answer 1

I guess you need to set height of mat-form-field to auto.