Flexbox 可滚动 bootstrap 卡片（垂直）

Question

我无法创建包含可滚动内容的卡片，如果它们超过屏幕高度。 我使用 flexbox 强制 main 填充整个垂直 space，从而将页脚推到页面的底部。您可以删除 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;
}