当容器宽度不足时，Flex 子元素默认会收缩以适应父容器，导致无法显示横向滚动条；通过设置 flex-shrink: 0 可禁用收缩行为，确保子元素保持原始尺寸并触发容器的 overflow-x: auto 滚动机制。
当容器宽度不足时，flex 子元素默认会收缩以适应父容器，导致无法显示横向滚动条；通过设置 `flex-shrink: 0` 可禁用收缩行为，确保子元素保持原始尺寸并触发容器的 `overflow-x: auto` 滚动机制。
在使用 Flexbox 布局实现水平滚动容器时，一个常见误区是：即使为父容器设置了 overflow-x: auto 和 display: flex，子元素仍会被强制压缩（而非溢出），导致滚动条不出现。根本原因在于 Flex 项目的默认样式包含 flex-shrink: 1 —— 这意味着当容器空间不足时，所有子项会主动缩小自身宽度以避免溢出。
要解决该问题，只需为每个子 div 显式设置 flex-shrink: 0（React 中对应 flexShrink: 0），同时确保父容器具备以下关键样式：
- display: flex（启用 Flex 布局）
- overflow-x: auto（启用横向滚动）
- white-space: nowrap（可选，防止内联内容换行干扰）
- 避免对子项设置 flex: 1、flex-grow: 1 等会引发弹性分配的属性
以下是修复后的完整代码示例（React + 内联样式）：
<div style="{{" width: background:>
<div style="{{" width: overflowx: display: border: padding: whitespace:>
{Array.from({ length: 10 }, (_, index) => (
<div key="{index}" style="{{" width: height: border: backgroundcolor: marginright: flexshrink: flexbasis flexgrow>
Item {index + 1}
</div>
))}
</div>
</div>
⚠️ 注意事项：
- 不要给子元素设置 width: 100% 或 flex: 1，这会覆盖固定宽高并重新触发弹性计算；
- 若使用 CSS 类替代内联样式，请确保 flex-shrink: 0 的优先级足够（例如避免被 flex: 1 覆盖）；
- 在部分旧版浏览器中，建议补充 -ms-flex-negative: 0 兼容 IE10+；
- 若需支持触摸设备平滑滚动，可添加 scroll-behavior: smooth 到父容器。
总结：Flex 布局中“溢出即滚动”的前提，是子元素拒绝收缩。flex-shrink: 0 是最直接、语义清晰且广泛兼容的解决方案，它让容器真正成为“内容画布”，而非“尺寸裁判”。
