当父容器设置 overflow: auto 且子项使用 white-space: nowrap 时，若子项为 display: flex（块级行为），会强制占满容器宽度，导致内容实际未溢出却出现无效滚动或视觉截断；改用 display: inline-flex 可使子项宽度由内容决定，从而正确触发滚动并完整显示内容。
当父容器设置 `overflow: auto` 且子项使用 `white-space: nowrap` 时，若子项为 `display: flex`（块级行为），会强制占满容器宽度，导致内容实际未溢出却出现无效滚动或视觉截断；改用 `display: inline-flex` 可使子项宽度由内容决定，从而正确触发滚动并完整显示内容。
在构建可横向滚动的紧凑列表（如文件管理器、标签栏或配置项面板）时，一个常见痛点是：子项设置了 white-space: nowrap 防止换行，父容器启用了 overflow: auto 和 resize: horizontal，但滚动条出现后，子项内容仍被“视觉截断”——看似没铺满容器，实则因 Flex 默认的块级伸展行为导致布局错位。
根本原因在于：原生 display: flex 的容器默认表现为块级框（block-level box），即使内部仅含短文本，也会强行撑开至父容器的可用宽度（100%），从而让 overflow 失去作用对象——真正溢出的是文本，但容器本身并未“变宽”，滚动机制无法被正确激活。
解决方案是将子项的显示模式从 flex 改为 inline-flex：
.item {
display: inline-flex; /* 关键修改：脱离块级流，宽度由内容驱动 */
white-space: nowrap;
padding: 0.5rem;
align-items: center;
}
同时确保父容器 .container 保持 overflow: auto 和明确的宽高约束：
.container {
overflow: auto;
resize: horizontal;
min-width: 10rem;
max-width: 25rem;
/* 推荐添加：防止 inline-flex 父容器塌陷 */
display: block; /* 或保留原有 flex 布局，但需确保高度可控 */
height: fit-content; /* 或设定具体高度，如 200px */
}
✅ 效果对比
- ❌ display: flex：.item 强制 100% 宽 → 文本被挤压或隐藏，滚动条无意义；
- ✅ display: inline-flex：.item 宽度 = 内容宽度 + padding → 超出容器时自然触发 overflow，滚动精准对应文本边界。
⚠️ 注意事项
- inline-flex 元素默认不独占一行，若需垂直堆叠，请确保其父容器为 block 或使用 flex-direction: column 并配合 align-items: stretch 控制对齐；
- 若 .container 本身是 Flex 子项（如你的 .flex-col 结构），请确认其 height 或 min-height 已明确定义，否则 overflow 可能失效；
- 避免在 .item 上误加 width: 100% 或 flex: 1，这会覆盖 inline-flex 的内容自适应特性。
通过这一微调，你无需 JavaScript 计算宽度，也不依赖 min-width 试探值，即可实现语义清晰、响应灵敏的横向滚动体验——既尊重内容长度，又严格遵循 CSS 盒模型逻辑。
