让材料表单字段适合 Flex Box 容器？答案

【问题标题】：Getting Material Form Fields to Fit within a Flex Box Container?让材料表单字段适合 Flex Box 容器？
【发布时间】：2020-06-16 05:39:23
【问题描述】：

在这个演示中，flex 容器的最大宽度为20rem。

我们如何让材料表单字段适合容器？目前它们溢出了。

在我模板的其他区域，我只是将一个类应用于mat-form-field，例如：

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

更新：由于应用了边距，我的应用程序中的字段仍在换行。要求 Material 移除此处的固定宽度：

【问题讨论】：

【解决方案1】：

字段具有固定宽度：

你需要覆盖宽度值：

然后它们会合身：

【讨论】：

我将此添加到app.component.css，但它仍然溢出：mat-form-field-infix { width:33% !important; }
@Ole 你忘了点，这是一个 CSS 类，不是 HTML 标签
我尝试将类和元素都添加为 css 选择器。 IIUC 容器不能是 flex box 容器，以便设置 width 属性。

【解决方案2】：

为所有三个mat-form-field 元素提供宽度：

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

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

【讨论】：