本文介绍一种使用 Flexbox 结合 position: absolute 的可靠方案，使绝对定位的卡片自适应父容器高度，内容超出时自动启用垂直滚动，同时保持“内容适配则不滚动、溢出才滚动”的自然行为。
本文介绍一种使用 flexbox 结合 `position: absolute` 的可靠方案，使绝对定位的卡片自适应父容器高度，内容超出时自动启用垂直滚动，同时保持“内容适配则不滚动、溢出才滚动”的自然行为。
在构建响应式卡片组件（如弹出面板、侧边抽屉或悬浮信息卡）时，常需满足两个关键约束：
- 卡片整体最大高度受限于父容器（例如 100vh），且需预留上下边距；
- 内容区（.content）应仅在实际内容超出可用空间时才出现滚动条，而非始终显示空滚动条或强制固定高度。
原问题中尝试直接对 .content 设置 overflow-y: scroll 是无效的——因为其父元素 .card 缺乏明确的高度约束机制，且未定义内部布局流，导致浏览器无法计算可滚动区域的可用高度。
✅ 正确解法是：为 .card 启用 Flex 布局，并将 .content 设为弹性子项。这样，.content 会自动占据剩余空间，overflow-y: auto 才能精准触发滚动。
以下是完整、可运行的解决方案：
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.parent {
position: relative;
height: 100vh; /* 父容器占满视口高度 */
}
.card {
position: absolute;
top: 16px; /* 配合 margin 实现居中定位（可选） */
left: 16px;
right: 16px;
background: #ff6b6b;
padding: 8px;
margin: 16px; /* 注意：此处 margin 会参与布局计算，更推荐用 top/left/right 控制位置 */
max-height: calc(100% - 32px); /* 扣除上下 margin 总和 */
display: flex;
flex-direction: column;
/* 关键：flex 容器需有明确高度上限，否则子项无法收缩 */
}
.card > :first-child {
/* Header 不设 flex-shrink，保持最小高度 */
flex-shrink: 0;
}
.content {
flex: 1; /* 占据所有剩余空间 */
overflow-y: auto; /* 内容超限时自动显示滚动条 */
padding: 8px;
background: #fff;
}
<div class="parent">
<div class="card">
<div class="header">Header</div>
<div class="content">
This should scroll if it doesn't fit.<br><!-- 大量重复文本（略） -->
This should scroll if it doesn't fit.
</div>
</div>
</div>
? 关键要点说明：
- max-height: calc(100% - 32px) 中的 32px 对应上下 margin: 16px 的总和，确保卡片不会溢出父容器；
- flex: 1 作用于 .content，使其成为弹性增长项，动态填充 .card 内剩余高度；
- 使用 overflow-y: auto（而非 scroll）可避免空白滚动条，提升用户体验；
- 若需兼容旧版浏览器（如 IE11），建议添加 -ms-flex: 1 前缀；
- ⚠️ 注意：margin 在绝对定位元素上仍生效，但可能影响尺寸计算逻辑；更健壮的做法是移除 margin，改用 top/left/right/bottom 定位 + padding 控制内边距。
该方案兼顾语义清晰性、CSS 可维护性与跨浏览器稳定性，适用于各类需要“弹性高度 + 按需滚动”的 UI 场景。
