Flexbox卡片滚动控制问题：需在.contentExt类实现滚动

要实现让.contentExt类控制滚动，同时保证卡片footer始终固定在底部，核心是利用Flex布局分配卡片内部的高度空间，具体修改如下：

1. 调整卡片容器的布局逻辑，让内部元素垂直自适应分配空间：

.card {
  height: 300px;
  border: 1px solid #ccc;
  display: flex; /* 开启flex垂直布局 */
  flex-direction: column;
}

2. 让中间的.content容器自动占据header和footer之外的所有剩余高度：

.card .content {
  flex: 1; /* 填充卡片剩余空间 */
  padding: 10px;
}

3. 给.contentExt设置高度继承和滚动属性，让它成为独立的滚动容器：

.contentExt {
  height: 100%; /* 继承父容器.content的完整高度 */
  overflow: auto; /* 内容超出时触发滚动 */
}

原理说明 #

• 卡片设置为flex垂直布局后，header和footer会保持自身高度，.content通过flex:1自动填充剩余空间，确保footer始终固定在卡片底部。
• .contentExt继承.content的高度，当内部内容超过该高度时，仅自身触发滚动，不会影响外层卡片的整体布局。

这样修改后，内容不足时footer正常处于底部，内容过多时只有.contentExt区域滚动，完全符合需求。

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