css - 如何修复 flex mat-form-field 容器？

Question

我有以下 HTML 代码：

<div class="flex-equal-width">
    <div>
      <mat-form-field appearance="outline" class="formfieldspacing">
        <mat-label>Login</mat-label>
        <input matInput [(ngModel)]="login" />
        </mat-form-field>
     </div>
</div>

CSS 样式：

.flex-equal-width {
    display: flex;
    gap: 10px;
}

.flex-equal-width div {
   flex-grow: 1;
   flex-basis: 0;
 }

问题是在输入字段内单击后样式被破坏：

如果要删除样式：

 .flex-equal-width div {
       flex-grow: 1;
       flex-basis: 0;
     }

它工作正常。这里有什么问题？

标签： cssangularangular-material