Mat Date Picker 打开时溢出

Question

在我的 Angular 项目中，我在多个地方使用了 mat date picker。最近我开始看到这个问题（不确定是什么原因造成的），mat date picker 在打开时溢出。我在整个应用程序中看到了这个问题，而不仅仅是在一个地方。不知道如何描述它，附上屏幕截图以供参考。我无法在 StackBlitz 中重现它，因为它特定于我的应用程序。我正在使用 Angular 和 Material 11.1.2

更新：深挖后发现mat-calendar-table class其实是越界导致溢出

Answer 1

基于此 issue 添加 table-layout: fixed; 到 styles.scss 文件中的 table 标签解决了我的问题

table
{
  table-layout: fixed !important;
  width: 100% !important; 
}

如果你也使用了mat-table并且不想固定mat-table布局，添加下面的css到styles.scss

table
{
  table-layout: fixed !important;
  width: 100% !important;
}

.mat-table
{
  table-layout: auto !important;
  width: 100% !important;
}

Answer 2

检查你的全局样式，检查是否有任何全局样式到 tr 或 td，特别是 td。