当 Flex 项目（flex item）内容超出容器边界时，需通过合理设置 flex、min-height 和 overflow 属性，使内部可滚动区域正常生效，避免父级 Flex 项目塌陷或溢出。
当 flex 项目（flex item）内容超出容器边界时，需通过合理设置 `flex`、`min-height` 和 `overflow` 属性，使内部可滚动区域正常生效，避免父级 flex 项目塌陷或溢出。
在使用 display: flex 且 flex-direction: column 的布局中，若某个 flex item 内部包含长文本或嵌套容器，直接对子容器设置 overflow: auto 往往无效——这是因为 flex item 默认不会主动约束自身高度，导致其无限制撑开，从而让内部滚动失效。
根本原因在于：Flex 项目默认具有 min-height: auto 行为，它会优先伸展以容纳内容，而非收缩以适配父容器剩余空间。因此，要启用内部滚动，必须显式打破这一行为。
✅ 正确解法需三步协同：
-
为承载滚动内容的 flex item 设置
flex: auto（即flex: 1 1 auto），使其参与剩余空间分配； -
添加
min-height: 0，覆盖默认的min-height: auto，允许其在空间不足时收缩； -
对目标滚动容器（如
.scrollable）设置flex: auto+overflow: auto，并确保其父级（即该 flex item 内的直接包装层）为display: flex; flex-direction: column，以激活弹性布局上下文。
以下是推荐的 CSS 实现（兼容现代浏览器，含 CSS Nesting 支持）：
.container {
display: flex;
flex-direction: column;
max-width: 200px;
max-height: 150px; /* 确保容器有明确高度约束 */
border: 1px solid #e00;
overflow: hidden; /* 防止容器自身溢出 */
}
.container-item {
flex: none; /* 默认不伸缩，保持内容高度 */
display: flex;
flex-direction: column;
}
/* 当 container-item 包含 .scrollable 时，切换为弹性伸缩模式 */
.container-item:has(.scrollable) {
flex: auto; /* 占据剩余空间 */
min-height: 0; /* 关键！允许收缩 */
}
.container-item:has(.scrollable) > div {
flex: none; /* 非滚动项保持固有高度 */
}
.container-item:has(.scrollable) > .scrollable {
flex: auto; /* 占满剩余可用高度 */
overflow: auto; /* 启用滚动 */
padding: 4px; /* 可选：提升可读性 */
}
HTML 结构保持简洁清晰：
<div class="container">
<div class="container-item">Lorem ipsum</div>
<div class="container-item">
<div>Lorem, ipsum dolor sit amet</div>
<div class="scrollable">
Lorem ipsum dolor sit amet...（超长文本）
</div>
</div>
</div>
⚠️ 注意事项：
- 若需兼容不支持
:has()的旧版浏览器（如 Safari .scrollable-parent）替代:has(.scrollable)； - 避免对
.scrollable直接设固定height，应依赖flex: auto动态计算； -
max-height必须作用于最外层 flex 容器，否则内部无法获得高度参考； - 在
column方向中，overflow: auto仅对垂直滚动生效；如需横向滚动，请额外设置white-space: nowrap或min-width: 0配合overflow-x。
掌握这一组合策略后，即可稳定实现「外层 Flex 布局 + 内部按需滚动」的响应式内容容器，兼顾结构语义与用户体验。
