Angular Material中如何限制mat-card高度匹配左侧mat-table避免溢出

核心问题原因 #

网格容器未设置固定高度约束，同时mat-card内部没有配置内容溢出处理规则，内容高度超过父容器最大高度时就会向外溢出。

适配逻辑（可自定义调整） #

首先以左侧4行mat-table的总高度为整个网格布局的统一基准高度，计算逻辑如下：

4行mat-table总高度 = 自定义表头高度 + 4 * 自定义单行行高 + 表格边框、内边距总偏移量
若使用Angular Material默认样式，参考值计算为：56px（默认表头高度） + 4 * 48px（默认单行高度） + 2px（默认边框偏移） = 250px，你可以根据项目自定义的样式替换对应参数重新计算即可。

具体CSS修改 #

1. 网格容器配置 #

/* 替换为你自己的网格容器类名 */
.grid-layout-wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr; /* 左右宽度比例可按需调整，比如改成3fr 2fr */
  gap: 16px; /* 两个组件的间距可按需调整 */
  height: 250px; /* 填入上面计算出的4行表格总高度 */
}

2. 右侧mat-card配置 #

/* 替换为右侧mat-card的自定义类名 */
.content-card {
  height: 100%; /* 撑满网格容器的高度，和左侧表格对齐 */
  display: flex;
  flex-direction: column;
}

.mat-card-content {
  flex: 1; /* 自动填充mat-card除了头部、尾部外的剩余空间 */
  overflow-y: auto; /* 内容超出时自动展示纵向滚动条，不会溢出 */
  /* 如果不需要滚动，想要截断内容加省略号，可以替换为以下属性：
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 6; /* 数字为你要限制的展示行数，按需修改 */
  /* -webkit-box-orient: vertical;
  */
}

3. 左侧mat-table配置（可选，适配表格数据超4行的场景） #

/* 替换为左侧表格的自定义类名 */
.rows-table {
  height: 250px; /* 和网格容器高度保持一致 */
  overflow-y: auto; /* 表格数据超过4行时内部滚动，不会撑高容器 */
}

内容的提问来源于stack exchange，提问作者LeO