当使用 justify-content: center 居中 Flex 项目时，若容器总宽度超过视口，左侧项目易被裁剪且无法水平滚动；本文提供纯 CSS 方案，在不修改 HTML 结构的前提下，通过 width: fit-content + margin: 0 auto 实现响应式居中与完整可滚动布局。
当使用 `justify-content: center` 居中 flex 项目时，若容器总宽度超过视口，左侧项目易被裁剪且无法水平滚动；本文提供纯 css 方案，在不修改 html 结构的前提下，通过 `width: fit-content` + `margin: 0 auto` 实现响应式居中与完整可滚动布局。
在 Flex 布局中，justify-content: center 虽能将子项整体居中，但其本质是在固定宽度容器内进行内容对齐。一旦子项总宽度超出视口（尤其是移动端或窄屏），浏览器不会自动添加水平滚动条，而是将溢出部分（通常是左侧）直接裁剪——这正是问题根源。
✅ 正确解法：放弃在 .container 上依赖 justify-content 居中，转而让容器自身「收缩包裹」内容，并借助外边距实现视觉居中：
.container {
display: flex;
flex-direction: row;
/* 移除 justify-content: center */
margin: 0 auto; /* 关键：使容器在父容器（如 body）中水平居中 */
width: fit-content; /* 关键：容器宽度仅包裹所有子项，不强制撑满 */
overflow-x: auto; /* 可选：显式启用水平滚动（增强兼容性） */
scroll-behavior: smooth; /* 可选：滚动更平滑 */
}
/* 确保子项不换行、保留固有宽度 */
.container > div {
flex: 0 0 auto; /* 防止缩放或压缩 */
white-space: nowrap;
}
同时建议添加基础重置以避免意外盒模型干扰：
* {
box-sizing: border-box;
}
? 关键原理说明：
- width: fit-content 让容器宽度由子项内容自然决定，而非继承父容器 100% 宽度；
- margin: 0 auto 则使该「自适应宽度容器」在视口中真正居中；
- 当内容总宽 > 视口时，因容器不再强制占满整行，overflow-x: auto 即可生效，用户可向左/右滚动查看全部项目，首个子项绝不会被截断；
- 整个方案完全基于 CSS，零 JavaScript，且无需改动任何 HTML 结构。
⚠️ 注意事项：
- fit-content 在较老浏览器（如 IE）中需使用 -webkit-fit-content 或回退方案，现代项目（Chrome/Firefox/Safari/Edge ≥ 88）可放心使用；
- 若需支持 Safari 15.4 以下版本，可用 width: max-content 替代（语义略有差异，但本场景效果一致）；
- 避免对 .container 设置 min-width: 100% 或 width: 100%，否则将重新触发裁剪行为。
最终效果：宽屏下子项优雅居中；窄屏下自动出现水平滚动条，首项始终可见，滚动后所有内容均可访问——兼顾美观性与可用性。
