如何实现头部固定、内容滚动且高度自适应的卡片样式？

想要打造一个带有固定头部和可滚动内容的卡片，要求卡片高度能根据内容量自适应：内容较少时卡片高度随内容收缩，内容较多时内容区域自动滚动，头部始终固定在卡片顶部。

之前通过给卡片设置固定高度实现了类似效果，代码如下：

原有代码 #

HTML #

<div class="card">
  <div class="sticky-header">
      <!-- 标题内容 -->
  </div>
  <div class="overflow-contents">
      <!-- 主体内容 -->
  </div>
</div>

CSS #

.card {
    height: calc(100vh - 32px);
    display: flex;
    flex-direction: column;
    overflow: scroll;
}

.sticky-header {
    display: sticky;
    top: 0px;
}

.overflow-contents {
    display: flex;
    flex-wrap: wrap;
}

调整后的解决方案 #

只需修改CSS，去掉卡片的固定高度，给内容区域设置滚动逻辑，同时给头部添加背景色避免内容穿透：

.card {
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 32px); /* 可选：限制卡片最大高度，防止内容过多时撑满页面 */
}

.sticky-header {
    position: sticky;
    top: 0;
    background-color: #fff; /* 用背景色覆盖下方滚动的内容 */
    z-index: 1; /* 确保头部在内容上方 */
}

.overflow-contents {
    flex: 1;
    overflow-y: auto; /* 内容超出时垂直滚动 */
    display: flex;
    flex-wrap: wrap;
}

调整后效果：

• 内容较少时，卡片高度自适应内容实际高度，无多余空白
• 内容较多超出卡片max-height（若设置）时，内容区域自动出现滚动条，头部固定在卡片顶部不随内容滚动

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