当容器宽度固定且子 div 具有明确宽高时，需禁用 flex 项的默认收缩行为（flex-shrink: 0），配合 overflow-x: auto 才能正确触发横向滚动条，而非压缩子元素。
当容器宽度固定且子 div 具有明确宽高时，需禁用 flex 项的默认收缩行为（flex-shrink: 0），配合 overflow-x: auto 才能正确触发横向滚动条，而非压缩子元素。
在 Flex 布局中，即使为容器设置了 `overflowX: "auto"`，若子元素未显式禁用收缩（shrink），浏览器仍会强制压缩它们以适应容器宽度——这是 Flex 的默认行为（`flex-shrink: 1`）。因此，仅靠 `width: "100%"` 和 `overflowX: "auto"` 并不足以实现预期的横向滚动效果。要彻底解决该问题，关键在于为每个子
添加 flexShrink: 0（对应 CSS 中的 flex-shrink: 0），确保其严格保持设定的 120px 宽度，不随容器空间变化而缩放。同时，容器需满足以下条件：
- display: "flex"（启用 Flex 布局）
- overflowX: "auto"（允许横向溢出时显示滚动条）
- 避免设置 flex-wrap: wrap（必须保持单行排列）
- 子元素间间距建议使用 gap 替代 marginRight，更语义化且避免末尾冗余间隙
✅ 正确示例代码（React JSX）：
<div style={{ width: "70%", background: "azure" }}>
<div
style={{
width: "100%",
overflowX: "auto",
display: "flex",
border: "solid 1px #c1c1c1",
padding: "5px",
gap: "5px" // 推荐替代 marginRight
}}
>
{Array.from({ length: 10 }, (_, index) => (
<div
key={index}
style={{
width: "120px",
height: "200px",
border: "solid 1px",
backgroundColor: "lightblue",
flexShrink: 0 // ✅ 核心修复：禁止收缩
}}
>
Item {index + 1}
</div>
))}
</div>
</div>⚠️ 注意事项：
- 不要对容器设置 whiteSpace: "nowrap"（Flex 布局下无效）；
- 若使用 CSS 文件，对应规则为 .child { flex-shrink: 0; }；
- 在 Safari 等旧版浏览器中，可补充 -webkit-flex-shrink: 0 以增强兼容性；
- 若需支持键盘导航滚动，建议为容器添加 tabIndex={0} 并优化焦点样式。
总结：Flex 项的「弹性收缩」是横向滚动失效的根本原因。通过显式设置 flex-shrink: 0 锁定子元素尺寸，并确保容器具备溢出处理能力，即可稳健实现固定尺寸子项的水平流式布局与原生滚动体验。
