如何修复flex布局下mat-form-field点击输入框后样式错乱问题

问题根本原因 #

你使用的.flex-equal-width div是后代选择器，会匹配.flex-equal-width容器内所有层级的div元素，不止是你写的外层直接子div，还会命中Angular Material的mat-form-field组件内部自动生成的所有内置div（包括浮动标签、轮廓框、提示信息等功能对应的内部DOM节点）。

你给所有后代div强制加上flex-grow:1和flex-basis:0属性，直接破坏了mat-form-field本身预设的内部布局规则。当输入框触发焦点时，组件要执行标签上浮、轮廓框高亮等动画，内部布局被你强加的flex属性打乱，就会出现样式错乱。删除这段代码后组件内部布局恢复默认，因此样式回归正常。

可行修复方案 #

• 方案1：改用直接子选择器匹配外层容器的直属子元素
  将原CSS的后代选择器替换为>直接子选择器，仅控制你自己写的外层直接子div，不会影响组件内部嵌套的div：

.flex-equal-width {
    display: flex;
    gap: 10px;
}
/* 仅匹配直属子div，不影响内部嵌套元素 */
.flex-equal-width > div {
   flex-grow: 1;
   flex-basis: 0;
}
/* 补充：让mat-form-field撑满父容器宽度 */
.formfieldspacing {
  width: 100%;
}

• 方案2：给目标子元素加自定义类名控制
  给需要自适应宽度的外层子div单独加自定义类，避免选择器误命中其他元素，可维护性更高：
  HTML修改：

<div class="flex-equal-width">
    <!-- 给目标子div加自定义类 -->
    <div class="flex-auto-item">
      <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-auto-item {
   flex-grow: 1;
   flex-basis: 0;
}
.formfieldspacing {
  width: 100%;
}

• 方案3：直接给mat-form-field设宽度
  如果不需要通过外层div控制弹性布局，也可以直接给mat-form-field设置width: 100%，外层flex容器下的元素会自动适配宽度。

内容的提问来源于stack exchange，提问作者user14480036