flex-wrap: nowrap仅禁止容器主动折行，不解决子元素内容溢出；需配合white-space: nowrap、min-width: 0、明确父宽及overflow-x: auto才能实现横向滚动。
flex子元素不换行但内容溢出时，为什么加了flex-wrap: nowrap还是换行？
因为flex-wrap: nowrap只控制“是否允许flex容器主动折行”，不解决子元素自身宽度超出、文本撑开或最小尺寸限制的问题。常见表现是：明明写了nowrap，文字却断行，或者子项被压缩变形。
真正起作用的往往是默认的min-width: auto（Flex项的默认最小宽度会阻止收缩）和文本自然换行行为。
- 给子元素加
white-space: nowrap，防止内部文本折行 - 加
min-width: 0或min-width: fit-content，解除Flex项对收缩的阻塞 - 确保父容器有明确宽度（比如
width: 100%或固定值），否则nowrap无实际约束范围
用overflow-x: auto实现横向滚动，但滚动条不出现？
滚动条不出现，通常是因为容器没有“可滚动的条件”：要么内容没真的溢出，要么容器没设width或max-width，导致Flex把所有子项强行挤进可视区。
- 父容器必须设
overflow-x: auto（不能只写overflow: auto，IE/旧版Safari对overflow-y隐式影响敏感） - 父容器需有明确的
width或max-width，否则Flex会按内容伸展，永远不触发溢出 - 子元素不能设
flex-shrink: 0后又没控宽——这会让它们死扛不缩，但若总宽仍小于容器，也不会滚动 - 移动端要注意
-webkit-overflow-scrolling: touch，否则iOS Safari滚动卡顿
Flex子项宽度失控：flex: 0 0 auto和flex: 0 0 100px差在哪？
这两个声明决定了子项“愿不愿意缩”和“初始占多大地方”，直接影响溢出与否。
-
flex: 0 0 auto：不放大、不缩小、基础尺寸按内容（比如文字长度），容易撑宽容器 -
flex: 0 0 100px：不放大、不缩小、基础尺寸强制100px，更可控，适合图标+文字等固定结构 - 如果子项含图片或
input等替换元素，还要额外设max-width: 100%，否则它们可能无视Flex收缩规则
横向滚动在不同浏览器里表现不一致，怎么稳住？
主要是Firefox对flex-wrap: nowrap下子项min-width的处理更严格，而Chrome/Safari有时会“悄悄压缩”文本；另外，滚动条是否占据空间也影响布局。
- 统一加
scrollbar-width: none（Firefox）和::-webkit-scrollbar { display: none }（WebKit）隐藏滚动条，避免宽度跳变 - 用
overflow-x: scroll代替auto，强制显示滚动轨道（哪怕空着），保持容器高度稳定 - 避免依赖
fit-content——它在旧版Edge和部分Android WebView里不支持，用min-width: 0+width: max-content组合更稳妥
最易被忽略的是：父容器没设width时，Flex容器宽度由内容决定，overflow根本不会生效——这不是bug，是Flex计算逻辑本身如此。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
