当 Flex 项目内容超出容器边界时，需通过合理设置 flex 属性与 overflow 配合，使内部可滚动区域获得独立的尺寸约束，从而在不破坏布局的前提下显示滚动条。
当 flex 项目内容超出容器边界时，需通过合理设置 `flex` 属性与 `overflow` 配合，使内部可滚动区域获得独立的尺寸约束，从而在不破坏布局的前提下显示滚动条。
在使用 flex-direction: column 的 Flex 布局中，若某个 flex item（如第二个子项）包含大量文本或嵌套容器，它默认会随内容撑开，导致整体超出父容器高度——此时单纯对内部 .scrollable 元素设置 overflow: auto 是无效的，因为其父级 flex item 未被限制尺寸，浏览器无法确定“可滚动的范围”。
关键在于：必须让该 flex item 成为弹性主轴上的“可伸缩容器”，同时为其内部滚动区域提供明确的尺寸上下文。以下是推荐方案：
✅ 正确做法（CSS 核心逻辑）
.container {
display: flex;
flex-direction: column;
max-width: 200px;
max-height: 150px; /* 确保容器有明确高度上限 */
border: 1px solid red;
overflow: hidden; /* 防止容器自身溢出 */
}
.container-item {
flex: none; /* 默认不伸缩，保持内容高度 */
}
/* 仅对含 .scrollable 的 item 启用弹性伸缩 */
.container-item:has(.scrollable) {
flex: auto; /* 在剩余空间中填充 */
min-height: 0; /* 关键！重置最小高度，允许收缩 */
}
.container-item:has(.scrollable) > div {
flex: none; /* 防止其他兄弟 div 挤占空间 */
}
.container-item:has(.scrollable) > .scrollable {
flex: auto; /* 占据 item 内剩余可用空间 */
overflow: auto; /* 启用滚动 */
min-height: 0; /* 同样关键：避免 flex 最小尺寸限制滚动区域 */
}
✅ HTML 结构（保持语义清晰）
<div class="container">
<div class="container-item">Lorem ipsum</div>
<div class="container-item">
<div>Lorem, ipsum</div>
<div class="scrollable">
Lorem ipsum dolor sit amet...（长文本）
</div>
</div>
</div>
⚠️ 注意事项
-
min-height: 0是解决“滚动失效”的核心：Flex items 默认min-height: auto，会阻止其收缩到小于内容高度，从而让flex: auto失效； -
:has(.scrollable)是现代 CSS（Chrome 105+、Firefox 121+ 支持），若需兼容旧浏览器，可改用显式类名（如.container-item--scrollable）替代； - 避免在
.scrollable上设置固定height，应交由 Flex 布局动态计算，确保响应性； - 父容器（
.container）必须有明确的max-height或height，否则无滚动触发依据。
通过以上配置，第二个 .container-item 将自动占据剩余空间，其内部 .scrollable 区域则在内容超限时精准显示垂直滚动条，既保持布局稳定，又实现预期交互效果。
