如何让带overflow:auto的卡片中日期、时间元素始终对齐底部？

核心思路是将卡片拆分为可滚动的内容区域和固定的底部信息栏，通过Flex布局让底部栏始终固定在卡片底部，仅内容区域处理超长文本的滚动需求。

1. 调整HTML结构 #

把任务描述和底部日期时间拆分为两个独立容器：

<li class="todo-card">
  <div class="card-content">
    <span id="cardTitle">这里是超长任务描述，超出后将自动滚动查看...</span>
  </div>
  <div class="card-footer">
    <span id="cardDate">2024-05-20</span>
    <span id="cardHour">14:30</span>
  </div>
</li>

2. 修改CSS代码 #

利用Flex布局实现内容区滚动、底部栏固定：

/* 卡片容器：垂直排列子元素，确保底部栏固定 */
.tilesWrap li {
  flex: auto;
  width: 300px;
  padding: 10px 20px;
  position: relative;
  margin: 10px;
  font-family: monospace;
  min-height: 40vh;
  max-height: 400px;
  text-align: left;
  display: flex;
  flex-direction: column;
}

/* 内容区：占据卡片剩余空间，超长文本时自动滚动 */
.card-content {
  flex: 1;
  overflow-y: auto;
  padding-top: 20px;
}

#cardTitle {
  font-weight: bold;
  display: block;
}

/* 底部信息栏：固定在卡片底部 */
.card-footer {
  margin-top: 10px;
}

#cardDate {
  font-size: large;
  display: block;
}

#cardHour {
  font-size: large;
  display: block;
}

原问题原因说明 #

原代码中卡片整体设置overflow: auto，导致整个卡片内容（包括绝对定位的日期时间）都会随滚动移动，长文本会覆盖底部元素。拆分容器后，仅内容区域处理滚动，底部栏不受内容高度影响，无论文本长短都能固定在卡片底部。

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