将Angular Material输入字段调整为屏幕宽度

Question

我想用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>

这个CSS：

.grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 2em;
}

全屏的结果很好但是当我减少浏览器窗口宽度时，右侧的输入字段会移出容器。

附有暴露行为的图像。

Answer 1

您是否尝试将width: 100%添加到mat-form-field？

如果它不起作用，请尝试使用angular flex layout在角度项目中使用css flexbox。

Answer 2

为了获得所需的结果，我将两个输入字段包含在<div>中，并包含下一个CSS类：

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

然后将这些属性应用于每个字段：

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