Flexbox布局下垂直溢出overflow-y滚动功能无法正常生效

滚动不触发的核心问题是：你只给最外层卡片设置了固定高度，但卡片到.transaction-lines之间的所有嵌套父元素都没有高度约束，默认height: auto会随内容自动撑开，直接把外层固定高度的卡片撑破。.transaction-lines本身始终能获得足够高度展示全部内容，自然不会触发溢出滚动逻辑。
你的DOM嵌套路径是：固定高度卡片 → .card-main-content → .card-main-content-container → .content-container → .tab-section → .transaction-lines，中间几层没有高度传递，约束断了，滚动就失效。

用Flex布局做自适应高度约束是最优方案，不需要手动计算页脚占用高度，适配性更强：

• 给最外层固定高度卡片添加display: flex; flex-direction: column;，让内部内容区、页脚区纵向排布
• 给.card-main-content添加flex: 1; min-height: 0;：flex:1让内容区自动占满卡片除页脚外的所有剩余高度，min-height: 0是必加项，用来修复Flex子项默认最小高度为内容高度的浏览器默认行为，避免元素被内容撑开
• 给.card-main-content-container、.content-container、.tab-section这三个中间嵌套容器统一添加height: 100%;，把高度约束一路传递到目标滚动容器
• 给.transaction-lines添加height: 100%; overflow-y: auto;即可，用auto替代scroll体验更好，仅当内容溢出时才显示滚动条
• 给底部的.card-footer-container添加flex-shrink: 0;，避免页脚内容被压缩

/* 外层卡片 保留你原本设置的height: 34vh即可 */
.test-card.main-details {
  display: flex;
  flex-direction: column;
}

.card-main-content {
  flex: 1;
  min-height: 0;
}

.card-main-content-container,
.content-container,
.tab-section {
  height: 100%;
}

.transaction-lines {
  height: 100%;
  overflow-y: auto;
  /* 可选：预留滚动条位置，避免滚动条出现时内容偏移 */
  scrollbar-gutter: stable;
}

.card-footer-container {
  flex-shrink: 0;
}

避坑提示：不要给中间任意一层父元素设置非visible的overflow属性，否则滚动条会出现在父层，不会出现在你指定的.transaction-lines容器上。

如果不想用Flex方案，也可以给所有中间父元素设置height: 100%，但需要手动给.card-main-content减去页脚的固定高度，页脚尺寸变动后需要重新计算，维护成本很高，不推荐使用。

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