当使用 justify-content: center 的 Flex 容器宽度超出视口时，左侧子元素常被截断；本文提供纯 CSS 解决方案——通过 width: fit-content 配合 margin: 0 auto 实现动态居中，并确保溢出时出现水平滚动条且首项始终可见。
当使用 `justify-content: center` 的 flex 容器宽度超出视口时，左侧子元素常被截断；本文提供纯 css 解决方案——通过 `width: fit-content` 配合 `margin: 0 auto` 实现动态居中，并确保溢出时出现水平滚动条且首项始终可见。
在响应式布局中，对 Flex 容器设置 justify-content: center 确实能让子项在容器内水平居中，但当容器总宽度（如多列 flex item 累加）超过视口宽度时，浏览器默认将“视觉中心”锚定在视口中央，导致左侧内容被裁剪、无法滚动到开头——这违背了可用性原则。
核心问题在于：justify-content: center 作用于容器内部，不控制容器自身在父级中的定位；而裁剪实际发生在容器父级（如 body）的边界处。
✅ 正确解法是移除 justify-content: center，转而让容器自身成为可居中、可溢出的独立块级单元：
.container {
display: flex;
flex-direction: row;
color: yellow;
background: #666;
margin: 0 auto; /* 在父容器（如 body）中水平居中 */
width: fit-content; /* 宽度仅包裹所有子项，不强制撑满 */
overflow-x: auto; /* 关键：启用水平滚动 */
scroll-behavior: smooth;
padding: 10px 0; /* 可选：避免滚动条遮挡内容 */
}
/* 为子项添加最小宽度或 white-space 控制（防换行干扰布局） */
.container > div {
flex: 0 0 auto; /* 禁止压缩/拉伸，保持固有尺寸 */
padding: 10px;
border: 1px dashed yellow;
white-space: nowrap; /* 防止单行文本换行，确保宽度可控 */
}同时，需确保父容器（如 <body>）允许水平溢出：
body {
overflow-x: hidden; /* 默认即可，但显式声明更安全 */
}
/* 若需全局支持滚动，请勿设 overflow-x: hidden */? 关键要点说明：
- width: fit-content 让容器宽度由子项内容决定，而非父容器；配合 margin: 0 auto，它在视口内居中，且当内容过宽时，自然触发 overflow-x: auto；
- flex: 0 0 auto 替代默认的 flex: 1 行为，防止子项被错误压缩导致尺寸失真；
- white-space: nowrap 对纯文本子项尤其重要，避免因换行缩小单个 item 宽度，影响 fit-content 计算；
- 此方案零 JavaScript、零 HTML 结构变更，完全符合“仅用 CSS”的需求。
? 进阶提示： 若需在小屏下回退为垂直堆叠，可叠加媒体查询：
@media (max-width: 768px) {
.container {
flex-direction: column;
width: 100%;
align-items: center;
}
.container > div {
width: 100%;
text-align: center;
}
}该方案已在现代浏览器（Chrome/Firefox/Safari/Edge ≥ 2020）中稳定运行，JSFiddle 验证地址：https://www.php.cn/link/4da5b5c8771b3ce9ff11f5c5d9f078e2（建议在修改后刷新预览）。
