Angular Material卡片中Flex布局异常：内容溢出时Footer被下移

问题描述 #

在Angular Material卡片内放置了一个包含wrapper、content、footer的组件，CSS布局代码如下：

.wrapper {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  height: 100%;
  box-sizing: border-box;
}
.content {
  flex: 1;
  box-sizing: border-box;
  overflow: auto;
  scrollbar-width: thin;
}
.footer {
  box-sizing: border-box;
  height: 50px;
}

预期效果是content填充剩余空间并在内容溢出时滚动，在普通HTML页面中布局正常，但放入Angular Material卡片（仪表盘场景）后，内容未溢出时显示正常，一旦溢出，footer会被向下推，布局异常。

解决方案 #

1. 强制Content遵守Flex约束 #

在flex布局中，子元素内容溢出时可能会突破flex:1的高度限制，给content添加min-height: 0可强制其遵守容器高度：

.content {
  flex: 1;
  box-sizing: border-box;
  overflow: auto;
  scrollbar-width: thin;
  min-height: 0; /* 核心修复 */
}

2. 确保卡片及内部容器的高度传递 #

Angular Material的<mat-card>默认没有明确的flex布局设置，需要给卡片和内部容器添加flex属性以传递高度：

mat-card {
  height: 100%; /* 根据布局需求设置固定值或百分比 */
  display: flex;
  flex-direction: column;
}

mat-card-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  margin: 0; /* 移除默认margin避免布局偏移 */
}

3. 验证Wrapper的高度继承 #

确保wrapper的height:100%能正确继承自父容器，若父容器（如mat-card-content）未设置高度，wrapper的100%高度会失效，需确保父容器也有明确的高度或flex属性。

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