本文介绍如何通过 Flexbox 布局配合 max-height 和 overflow-y: auto，使绝对定位的卡片组件自适应父容器高度，内容超出时自动启用垂直滚动，同时保持“收缩包裹”（shrink-to-fit）行为。
本文介绍如何通过 flexbox 布局配合 `max-height` 和 `overflow-y: auto`，使绝对定位的卡片组件自适应父容器高度，内容超出时自动启用垂直滚动，同时保持“收缩包裹”（shrink-to-fit）行为。
在构建响应式卡片组件（如弹窗、侧边面板或信息卡片）时，常需满足两个关键需求：
- 卡片整体高度不能超过父容器可用空间；
- 当内容过多时，仅内容区域可滚动，头部固定，且卡片本身不溢出也不强制拉伸——即“能小则小，超限则滚”。
原方案失败的核心原因在于：
- .content 未设置高度约束，overflow-y: scroll 在无高度限制下无效；
- .card 使用 position: absolute 后脱离文档流，其子元素无法通过常规流式布局继承高度上下文；
- height: "100vh" 中引号为语法错误，CSS 中数值不应加引号。
✅ 正确解法是将 .card 设为 flex 容器，利用 flex-direction: column 实现垂直布局，并通过 flex: 1 或显式 max-height 控制内容区高度。以下是推荐实现：
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.parent {
position: relative;
height: 100vh; /* ✅ 正确写法：无引号 */
}
.card {
position: absolute;
top: 16px;
left: 16px;
right: 16px;
background: #ff6b6b;
padding: 8px;
margin: 0; /* 避免与绝对定位冲突，改用 top/left/right 控制位置 */
max-height: calc(100% - 32px); /* 扣除上下 margin（16px × 2） */
display: flex;
flex-direction: column;
border-radius: 8px;
overflow: hidden; /* 防止阴影/边框溢出 */
}
.card > :first-child {
font-weight: bold;
margin-bottom: 8px;
}
.content {
flex: 1; /* ✅ 关键：占据剩余空间 */
overflow-y: auto; /* 自动启用滚动条（仅当内容溢出） */
padding: 4px 0;
min-height: 0; /* 兼容性保障：确保 flex 子项可收缩 */
}
<div class="parent">
<div class="card">
Header
<div class="content">
This should scroll if it doesn't fit. (repeated 35 times...)
</div>
</div>
</div>
? 关键要点说明：
- flex: 1 替代固定高度，使 .content 自动填充 .card 内剩余空间，是实现“动态适配 + 滚动”的核心；
- min-height: 0 是必要补充：默认情况下 flex 项目 min-height: auto 会阻止收缩，设为 0 才能让内容区真正随内容高度变化；
- max-height: calc(100% - 32px) 确保卡片整体不超过父容器减去预留边距后的空间；
- 推荐用 top/left/right 替代 margin 定位绝对元素，避免因 margin 参与 calc() 计算导致逻辑混乱；
- overflow: hidden 加于 .card 可防止滚动条或阴影渲染异常。
? 进阶提示：若需支持多卡片、动态尺寸或无障碍访问，建议配合 resize: vertical（内容区）、scrollbar-width（Firefox）及 @media 断点做渐进增强。此方案兼容所有现代浏览器（Chrome 29+、Firefox 28+、Safari 9+），无需 JS 即可实现纯 CSS 响应式滚动卡片。
