Html 使角度材质输入字段适应屏幕宽度

我想用CSS网格系统制作一个两列相等的网格。在每一列中，我想输入一个字段，该字段占该列宽度的100%。 为了实现这一点，我有以下html：

<div class="grid">

  <mat-form-field>
    <input matInput placeholder="Title">
  </mat-form-field>

  <mat-form-field>
    <input matInput placeholder="Title">
  </mat-form-field>

</div>

全屏显示的结果很好，但当我减小浏览器窗口宽度时，右侧的输入字段超出了容器

带有暴露行为的图像

---

您是否尝试将

宽度：100%

添加到

垫表单字段

---

如果不起作用，请尝试使用angular flex layout在angular projet中使用css flexbox。

为了获得所需的结果，我将两个输入字段都包含在下一个css类的

中：

.mainContainer {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
}

然后应用于此属性的每个字段：

.mainContainer > * {
    flex: 1;
    margin-right: 15px;
}

---

您是否尝试过

display:flex

并将

fxFill

添加到元素中？发布闪电战还是猛击？

.mainContainer > * {
    flex: 1;
    margin-right: 15px;
}