flex-nowrap 不能直接实现横向滑动，是因为 flex 项默认 flex-shrink: 1 会压缩子项导致无真实溢出，必须同时设置父容器宽度、子项 flex-shrink: 0 及处理文本溢出。
flex-nowrap 为什么不能直接让内容横向滑动
很多人试过给容器加 display: flex 和 flex-nowrap，再加 overflow-x: auto，结果发现滚动条没反应，或者内容被截断却不允许滑动。根本原因是：默认情况下，flex 项会压缩自身（shrink）来适应容器宽度，哪怕你写了 flex-nowrap，子项仍可能被强制缩小到看不见溢出——滚动的前提是「内容真实超出容器」，而不是「视觉上看起来超了」。
-
flex-shrink: 1是默认值，必须显式关掉才能保住子项原始宽度 - 父容器需有明确宽度（比如
width: 100%或固定值），否则 flex 容器可能无限撑宽，overflow失效 - 某些浏览器（尤其是 Safari）对
overflow-x在 flex 容器上的支持较弱，需加-webkit-overflow-scrolling: touch提升手感
让每个子项不压缩、不换行、可滑动的关键写法
核心就三步：锁住父容器宽度、禁止子项收缩、确保子项宽度不被重置。缺一不可。
- 父容器设
display: flex、flex-nowrap、overflow-x: auto，且必须有width（不能是max-content或未设限的100%在某些嵌套场景下） - 所有子项加
flex-shrink: 0（不能只写在某几个上，漏一个就会拖垮整行） - 子项避免用
flex: 1或flex: auto，它们隐含flex-shrink: 1，会悄悄压缩 - 移动端建议加
scroll-behavior: smooth和-webkit-overflow-scrolling: touch防止卡顿
.scroll-row {
display: flex;
flex-nowrap;
overflow-x: auto;
width: 100%;
scroll-behavior: smooth;
-webkit-overflow-scrolling: touch;
}
.scroll-row > * {
flex-shrink: 0;
min-width: 0; /* 防止内部文本溢出破坏布局 */
}常见错误：文字溢出导致布局错乱或无法滑动
即使 flex 设置全对，子项里一段长文本（比如 URL、日志 ID）没有约束，也会把整个子项撑宽、间接导致父容器宽度失控，overflow-x 失效或滚动异常。
- 子项内文本必须加
white-space: nowrap+overflow: hidden+text-overflow: ellipsis（如果需要省略） - 若子项是卡片/按钮等复合结构，
min-width: 0很关键——它让 flex 子项的最小宽度不再由内部文本决定 - 慎用
flex-basis: auto：它会让子项按内容宽度计算基准，容易和flex-shrink冲突
兼容性与性能注意点
这个方案在 Chrome/Firefox/Edge 上基本稳定，但 Safari 对 overflow-x + flex 的组合仍有边界问题，比如快速滑动时回弹异常、初始渲染不触发滚动条。
立即学习“前端免费学习笔记（深入）”；
- Safari 15.4+ 才较好支持
scroll-behavior: smooth在overflow-x容器中生效 - 大量子项（>50）时，避免给每个子项加
transition或will-change，会显著增加渲染压力 - 如果需要支持键盘方向键滚动，得用 JS 监听
keydown并调用element.scrollBy()，CSS 本身不处理键盘导航
滚动是否生效，最终只取决于两件事：子项有没有真实溢出容器、浏览器有没有把它当可滚动区域处理。很多“不工作”的情况，其实只是某个 flex-shrink 没关掉，或者父容器宽度在某个祖先节点里被重置了。
