Flexbox 可滚动引导卡（垂直）

Question

如果卡片超出屏幕高度，我无法创建具有可滚动内容的卡片。 我使用 flexbox 来强制 main 填充整个垂直空间，从而将页脚推到页面底部。您可以删除 Lorem Ipsum 文本的一部分以查看它是如何工作的。为了格式化所有卡片，我使用带断点的网格（示例中不包含断点）。

https://codesandbox.io/s/fervent-browser-bjek0?file=/src/App.js

如果可能，我不想使用 javascript 检查屏幕大小，而是使用 css。我不需要 IE 11 支持。

Answer 1

你好 :) 我能想到的最好的事情就是这个； 您可以使用 max-height 控制卡片高度。

.card {
  overflow-y: scroll;
  max-height: 80vh;
  scroll-behavior: smooth;
}
.card-body {
  position: relative;
}
.card-header {
  position: sticky;
  top: 0;
  background-color: #f8f9fa;
  z-index: 1;
}
.card-footer {
  position: sticky;
  bottom: 0;
  background-color: #f8f9fa;
  z-index: 1;
}