1033 像素处的 mat-menu 大小问题;截断数据

mat-menu sizing problem at 1033 pixels; truncates data

我在一个 Angular 7 项目中使用 Material 设计和 FlexLayout

我不明白为什么 mat-menu 会这样:当我的 window 大于 1032 像素宽度时,mat-menu 不会根据其项目调整大小并截断内容。

我是不是做错了什么?

我做了一个简单的 Stackblitz 来说明这个问题:https://stackblitz.com/edit/mat-menu-issue20190102

终于找到问题了。这是因为我的 body 有固定宽度 980px 和 margin:0 auto(使网站内容居中)。

我最终将自己包裹在一个 <div id="appContainer"> 中并将样式应用于此 div :

<body>
  <div id="appContainer">
    <app-root></app-root>
  </div>
</body>

#appContainer {
    height: 100%;
    margin: 0 auto;
    color:#444444;
    max-width: 980px;
    min-width: 400px;
}