本文介绍一种简洁可靠的 CSS 方案：通过合理设置 flex 属性与 overflow: auto，使 Flex 容器中的某个子项在内容溢出时自动显示滚动条，同时确保其余子项始终可见且不被压缩或隐藏。
本文介绍一种简洁可靠的 css 方案：通过合理设置 `flex` 属性与 `overflow: auto`，使 flex 容器中的某个子项在内容溢出时自动显示滚动条，同时确保其余子项始终可见且不被压缩或隐藏。
在构建响应式、紧凑型布局（如工具栏、侧边面板或卡片式组件）时，常需让 Flex 容器内仅一个子元素可滚动，而其余子元素保持固定尺寸并始终可见。上述问题的核心在于避免过度复杂的 flex-basis、min-width: fit-content 和冗余的 flex-shrink 配置——这些反而会干扰浏览器对剩余空间的计算，导致滚动失效或布局塌陷。
正确的做法是回归 Flexbox 的本质逻辑：利用 flex: 1 让目标子项（.second）弹性占据剩余可用空间，再结合 overflow: auto 触发其内部滚动机制。其余子项（.first 和 .third）保持默认静态尺寸（即 flex: 0 1 auto 的隐式行为），自然维持可见性与稳定性。
以下是优化后的完整实现：
.wrapper {
width: 250px;
border: 1px solid #000;
}
.container {
display: flex; /* 推荐使用标准 flex，而非 inline-flex，避免行内布局限制 */
gap: 10px; /* 可选：替代 margin 实现更可控的间距 */
}
.child {
margin: 5px;
}
.first {
background: yellow;
/* 无需显式 flex 声明，保持固有尺寸 */
}
.second {
background: red;
flex: 1; /* 关键：弹性撑满剩余空间 */
overflow: auto; /* 关键：内容溢出时显示滚动条 */
min-width: 0; /* 重要补充：防止 flex item 因内容过长拒绝收缩（尤其在嵌套 flex 中） */
}
.third {
background: blue;
}<div class="wrapper">
<div class="container">
<div class="first child">first</div>
<div class="container child second">
<div class="child">child</div>
<div class="child">child</div>
<div class="child">child</div>
<div class="child">child</div>
<div class="child">child</div>
</div>
<div class="third child">third</div>
</div>
</div>⚠️ 关键注意事项：
-
min-width: 0是.second的重要补充样式。当其内部存在长文本或不可折行内容（如 URL）时，浏览器默认会阻止 flex 项收缩至小于其内容最小宽度，导致overflow: auto失效。显式设为0可解除该限制，确保滚动正常触发。 - 避免在
.second上设置white-space: nowrap或width: 100%等可能破坏弹性行为的规则；若需控制内部子项排布，请在其子容器（即嵌套的.container）上单独定义display: flex和flex-wrap。 - 若需水平滚动，将
overflow: auto替换为overflow-x: auto并确保子项为flex-direction: row；垂直滚动则用overflow-y: auto（默认行为）。
这种方案兼顾语义清晰、代码精简与跨浏览器兼容性，是解决“单子项独立滚动”需求的推荐实践。
