当父容器设置 overflow: auto 且子项含长文本时，若子项未正确撑开宽度，滚动后内容会视觉截断；核心解法是将子项的 display: flex 改为 display: inline-flex，使其宽度随内容自适应而非强制占满行宽。
当父容器设置 `overflow: auto` 且子项含长文本时，若子项未正确撑开宽度，滚动后内容会视觉截断；核心解法是将子项的 `display: flex` 改为 `display: inline-flex`，使其宽度随内容自适应而非强制占满行宽。
在使用 Flexbox 构建可滚动列表时，一个常见却易被忽视的布局陷阱是：子元素（如 .item）虽设置了 white-space: nowrap 防止换行，但其外层 display: flex 容器默认以 块级弹性容器（block-level flex container） 形式渲染——这意味着它会继承父容器的宽度（例如 100%），即使内部内容远超该宽度，也不会自动“伸展”以包裹全部内容。结果就是：水平滚动条出现，但滚动到右侧时，文字仿佛被“切掉”，实际是 .item 元素自身宽度未随内容扩展，导致其子内容溢出却不可见。
✅ 正确解法是将 .item 的显示模式从 display: flex 改为 display: inline-flex：
.item {
display: inline-flex; /* 关键修改：由 block flex 变为 inline flex */
white-space: nowrap;
padding: 0.5rem;
align-items: center;
}
inline-flex 的核心特性在于：它保留了 Flex 布局的能力（如 flex-direction、align-items），但渲染行为变为内联级——即元素宽度仅由内容决定，不再强制拉伸至父容器宽度。这样，当 .item 内含长文本时，整个 flex 容器会自然伸展，确保所有内容始终处于可滚动视口内。
⚠️ 注意事项：
- 不要遗漏重置其他可能影响宽度的样式（如 width: 100%、flex: 1 或 min-width: 0），它们会与 inline-flex 冲突；
- 若需保持垂直对齐或间距一致性，建议统一在 .item 上设置 padding 和 align-items，避免依赖外部容器的 justify-content；
- resize: horizontal 应保留在 .container 上，配合 min/max-width 实现可控缩放，而 inline-flex 子项会随之动态响应宽度变化。
最终效果：容器正常触发横向滚动，每个 .item 独立撑开宽度，滚动全程内容完整可见，无视觉截断。这一方案轻量、语义清晰，且完全兼容现代浏览器，是处理“可滚动 flex 列表中长文本对齐”问题的推荐实践。
