居中即截断：justify-content: center 与 overflow 的冲突
一排标签 / 面包屑 / 工具按钮，数量少时想让它居中，数量多到一行放不下时想横向滚动看全。于是自然地写下 justify-content: center + overflow: auto——随后会发现：溢出时只能向右滚，左半边内容滚不到、被永久截断。这是 flex
布局中常见的对齐问题之一(iCSS #249)。
1 · 复现：拖到放不下，再滚到最左
下面的视口固定宽度。拖动滑块增加 item，当一行放不下时，用 justify-content 切换对齐方式，再点「滚到最左」——观察 center 下首个 item 是否无法完整显示（被标红框），而 flex-start 下能完整滚到。读数是把容器 scrollLeft 滚到 0 后，用 getBoundingClientRect 实测得到的。
为什么左边滚不到？ 滚动条的 scrollLeft 合法范围是
——只能往正方向滚。而 justify-content: center 把溢出的内容往中线推，首个 item 被推到容器内容原点的左侧（负坐标）。那块区域既不计入 scrollWidth、scrollLeft 又到不了 0 以下，于是哪怕滚到最左 (scrollLeft = 0)，它依然露不出来。flex-start 没这个问题，是因为内容从左边缘开始排，溢出全在右侧、全在可滚范围内。
2 · 解法 A:track 用 width: fit-content + margin: auto
不写 justify-content，改由 track 本身居中并裹住内容——width: fit-content 让 track 宽度贴着内容，margin: auto 把它当块级元素左右居中：
内容没超出视口： track 缩到内容宽，margin: auto 把这块窄 track 在视口里居中。
内容超出视口： track 撑到完整内容宽（连首尾 padding 一起裹进可滚区）,margin: auto 无剩余空间塌成 0、track 从左排、视口横向滚——左侧能完整滚到，首尾 14px 留白也都在。
取舍： 零额外 DOM、item 间距用 gap 正常控制、首尾留白不丢；只是 width: fit-content 较新，老浏览器需留意。
3 · 解法 B：嵌套一层，职责分离
外层管居中、内层管滚动、track 管裹内容，三层各司其职：
外层 display: flex; justify-content: center → 居中；内层 max-width: 100%; overflow: auto → 滚动且最宽不超过视口；track width: fit-content → 裹住内容（含 padding）。
内容没超出： track 缩到内容宽、内层跟着缩，外层 flex 把它居中。
内容超出： track 撑到完整内容宽，内层被 max-width: 100% 卡在视口宽、内部滚动——左侧可达，尾部 padding 也靠 track 的 fit-content 保住。
取舍：间距 / 留白完全可控、职责划分最直白；代价是多一层 .inner DOM、要改结构。
4 · 三种解法对照
| 解法 | 写法 | 居中 | 溢出可滚 | 取舍 |
|---|---|---|---|---|
| A · fit-content | track { width: fit-content; margin: auto } |
✓ | ✓ | 零额外 DOM，间距(gap)和首尾留白都可控、不丢；只是 fit-content 较新。 |
| B · 嵌套 + max-width | 外层 center / 内层 max-width:100% overflow:auto / track fit-content |
✓ | ✓ | 职责分离清晰、间距 / 留白完全可控；代价是多一层 DOM、要改结构。 |
| C · safe center | justify-content: safe center |
✓ | ✓ | 一行实现、无额外结构，语义最贴切（「居中，但不切到内容」）。代价是较新——见 safe / unsafe。 |
小结。 凡是「想居中又要能滚」的横向条，单独使用 justify-content: center 都存在截断风险。可用 safe center 时它最简洁（safe / unsafe 一页详解）；否则 解法 A（单元素 fit-content）最轻量、解法 B（嵌套）结构最清晰，两者的间距与首尾留白都可控，可按需选择。