Angular 当我向子mat芯片列表添加新项目时，为什么mat form字段会增加其高度？

我在

mat表单字段中有一个
mat芯片列表
。每当我向列表中添加一个新的
mat芯片
，mat form字段的高度就会增加。我的代码中有什么不正确的地方导致了这种行为

HTML:


{{event[contactTypeToDataMap.get（type）.fieldName]}

行为的屏幕截图：


提前谢谢
 芯片跳到下一行，因为它们不适合
mat form字段
组件。要修复此问题，请将其添加到CSS中：

mat-form-field {
    width: 100%;
}

问题解决了。非常感谢。你刚刚节省了我的时间！即使在“角材料”页面中的芯片演示中，它们也有一个类，其
宽度：100%
附加到
垫子表单字段
。我也遇到了类似的情况，在
div
中包含了
mat表单字段
。我通过将宽度为100%的同一类附加到所有包含
div的类来解决这个问题
mat-form-field {
    width: 100%;
}