如何让两个mat-form-field输入框不超出父div容器范围

问题根源 #

你给两个mat-form-field都设置了w-100（即width: 100%），再加上gap: 24px，总宽度会超过父容器的可用宽度，导致溢出。

可行解决方案 #

方案1：利用Flex布局的弹性分配（推荐） #

通过flex:1让两个表单域自动平分父容器的可用空间，同时自动扣除间隙宽度，无需手动计算：

修改后的HTML代码

<div class="flex gap">
  <mat-form-field appearance="outline" class="flex-1">
    <mat-label>Latitude</mat-label>
    <input type="text" matInput formControlName="latitude" />
  </mat-form-field>
  <mat-form-field appearance="outline" class="flex-1">
    <mat-label>Longitude</mat-label>
    <input type="text" matInput formControlName="longitude" />
  </mat-form-field>
</div>

补充CSS代码

.flex {
  display: flex;
}
.gap {
  gap: 24px;
}
.flex-1 {
  flex: 1;
  min-width: 0; /* 防止输入内容过长时撑开元素超出父容器 */
  box-sizing: border-box;
}

方案2：手动计算宽度（适合固定场景） #

如果不想使用弹性布局，可以通过calc手动计算每个表单域的宽度：

.form-field-half {
  width: calc((100% - 24px) / 2);
  box-sizing: border-box;
}

将HTML中的w-100替换为form-field-half即可，但这种方法在容器宽度动态变化时灵活性较差。

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