先记住这个答案
侧栏旁的代码预览把正文区撑宽，先看直接参与横向 Flex 布局的正文项。默认 min-width: auto 对非滚动项常把不可断内容当作收缩下限；即使写了 flex-shrink: 1，盒子也未必能再窄。把这层的 min-width 设为零后，代码块还可能继续溢出，需要单独决定换行或水平滚动。
min-width: auto不总是零- 长连续文本会抬高内容下限
- 滚动容器的自动下限可为零
- 基准尺寸不能替代最小尺寸
代码预览撑宽右侧分栏
两列 Flex 布局左边是固定导航，右边是代码预览。预览里的长行把右列撑过屏幕，哪怕右列设了 flex: 1。这时先看右列是不是一个直接 Flex 项，再看它的 min-width 计算值。min-width: auto 的自动下限保留了长行的最小内容宽度；把右列设为 min-width: 0 后，才能在右列内部安排滚动条。
.layout { display: flex; width: 100%; }
.sidebar { flex: none; width: 220px; }
.preview {
flex: 1 1 auto;
min-width: 0; /* 不再以内容宽度作为横向下限 */
overflow-x: auto;
}右栏盒子可以缩进容器，长代码则留在内部横向滚动。
最小内容宽度形成自动下限
“最小内容宽度”可以粗略理解为尽可能在允许断行处换行后仍需要的宽度。连续英文、长 URL、white-space: nowrap 等会把这个宽度抬高。Flex 收缩阶段计算出的目标宽度若低于自动最小宽度，就会被夹回去。具有明确宽度或宽高比的元素，还可能受到其尺寸建议的影响，所以不应机械地说所有 min-width: auto 都恰好等于文本最长词的宽度。
调试代码预览时，最有效的是把约束逐层打开：先看 .main 这个 Flex 项的计算宽度是否比容器余量大，再看内部 pre 是否超出 .main。若 .main 不肯变窄，试 min-width: 0；若只有 pre 越界，再让它横向滚动。把 overflow: hidden 直接写在主内容区虽然也能压住视觉溢出，却可能把复制按钮、焦点轮廓一起裁掉，阅读代码时也无法滚到行末。
一个实用的对照是把 pre 换成普通可换行段落。前者通常有较大的最小内容宽度，后者可在空格处断行，Flex 项就更容易缩小。由此可判断是布局尺寸约束还是内容本身的断行规则在起作用，避免把两个问题混成一条“Flex 不会缩”的结论。
容易答错的地方
- 认为
min-width: auto等于min-width: 0 - 横向非滚动 Flex 项的自动下限可能来自内容，两者在长内容场景会明显不同。
- 一律删掉最小宽度保护
- 某些按钮或图标需要保留可读、可点击的尺寸。只在确实需要压缩的内容区设零。
面试官还会怎么问？
overflow: auto 为什么有时让它能缩？
当 Flex 项成为滚动容器时，其自动最小主轴尺寸按零处理，内容转而在内部滚动；具体滚动容器层级仍要查清。
长词和普通中文段落为什么表现不同？
可断行机会不同，最小内容宽度也不同；长连续字符串常把自动下限抬高。
flex-basis: 0 可以替代 min-width: 0 吗？
不可以。基准尺寸决定分配空间的起点，自动最小宽度仍会在最后限制目标尺寸。
参考资料
示例用于理解所注明的运行环境与边界；延伸学习可结合原文中的更多案例。