Javascript 如何使物料表单字段适合Flex Box容器？

在本演示中，flex容器的最大宽度为

20rem

如何使物料表单字段适合容器？目前它们已溢出

在模板的其他区域，我只需将一个类应用于

mat表单字段

，如：

u-third-width: { width:33%}

更新：我的应用程序中的字段仍在换行，因为应用了边距。要求材料删除此处的固定宽度：

---

字段具有固定宽度：

您需要覆盖宽度值：

然后它们就会合适了：

---

为所有三个

垫表单字段提供宽度

元素：

<mat-form-field style="margin-right:2rem;width:25%">

---

以百分比形式提供宽度将有助于使它们随着窗口大小的减小/增大而缩小/增大。

这不会导致项目被包裹吗？我希望他们都在同一条线上？我的错，看来我看错问题了。我编辑了我的答案。除非我们在字段上使用边距，否则它们仍然换行。。。我要求删除固定宽度。不要使用边距，使用填充。我知道你给的宽度是33%。您可能需要考虑边距（考虑到这一点，我给出了25%）。我将此添加到

app.component.css

，但它仍然溢出：

mat form field infix{width:33%！important；}

@Ole您忘记了点，这是一个css类，而不是HTML标记。我尝试将类和元素添加为css选择器。IIUC为了设置宽度属性，容器不能是flex box容器。