Angular Material 和 CSS Flex 布局

Question

我有一个有角材料卡内的组件。该组件有两个 div，内容和页脚都包装在容器 div 中

.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;
}

其想法是内容填充剩余空间，并且当内容超出可用空间时可以滚动。

当内容小于其 div 的大小时，这看起来很棒，但是一旦超过 div 的大小，页脚就会向下推多个像素。

我已经在一个简化的 html 页面中完成了此操作，并且所有工作都按预期进行，一旦我将相同的 html 和相应的 css 放入角度材料卡（在仪表板中）中，它的行为就会不同并且看起来很糟糕。

以前有人遇到过这个问题吗？有解决方案或解决方法吗？

提前致谢

Answer 1

Angular Material 卡遇到了类似的问题。该问题似乎源于垫卡未占据其容器的整个高度，这导致当内容溢出时页脚被推下。为了解决这个问题，我对垫卡应用了一个自定义类，以确保它填充可用高度：

在此输入图片描述

然后我在 mat-card 上使用了这个类，解决了这个问题：

在此输入图片描述

这使得 .wrapper 的行为符合预期，内容填充了剩余空间并且页脚保持在原位。希望这有帮助！