Css 如何去除角材料芯片上100%的水平宽度？

我正在做一个角材料项目，遇到了一个问题。我尝试使用垂直堆叠的芯片，但是当我使用预定义的代码时，芯片的宽度是100%。是否有方法取消设置mat chip list stacked类中的宽度值？我不希望芯片是完全水平宽度

<mat-chip-list class="mat-chip-list-stacked" aria-orientation="vertical">
  <mat-chip>Papadum</mat-chip>
  <mat-chip>Naan</mat-chip>
  <mat-chip>Dal</mat-chip>
</mat-chip-list>

圆面包
印度薄饼
达尔

这是代码的样子：

这就是我希望代码的样子：

---

如果使用Angular 9，则可以覆盖

mat芯片

组件样式。您可以将“最大宽度”设置为特定长度

mat-chip {
  max-width: 50px;
}

或者，使用

覆盖宽度！重要

声明：

mat-chip {
  width: 50px!important;
}

如果您使用Angular 9之前的任何内容，那么必须通过选择正确的CSS类来对属性进行分类

.mat-chip-list .mat-chip {
  width: 50px;
}

---

要取消设置宽度，我们可以使用下面的css

.mat-chip-list .mat-chip {
  width: auto;
  min-width: 0;
}

---

这是最好的解决方案：

mat-chip {
  max-width: max-content;
  max-width: intrinsic;           /* Safari/WebKit uses a non-standard name */
  max-width: -moz-max-content;
}

---

你想要多宽？。比如10%20%等等，@GangadharGandi-我更新了消息内容，显示我在寻找动态宽度。用新样式更新了答案。请检查。我更新了邮件内容，以显示我在寻找动态宽度。@user3767997宽度是如何设置的？您是否会提供宽度的长度，而不是由材料预定义的class=“mat chip list stacked”自动设置的宽度。