先记住这个答案
右栏代码块越界时，先用开发者工具框选直接 Flex 子项。如果右栏盒子本身比容器宽，查看它的自动最小宽度，必要时试 min-width: 0；如果盒子已缩小而代码仍穿出去，问题在子内容的绘制。可以给代码块设 overflow-x: auto 保留可读性，别把所有溢出一概归咎于 flex-shrink。
- 先找越界的直接 Flex 项
- 设
min-width: 0可验证外层约束 - 盒子变窄后内容仍可能越界
- 代码等完整内容适合内部滚动
代码块把右栏撑出屏幕
一个左右分栏页面，右栏放代码块。你看到整页变宽，可能是右栏盒子本身被长行撑大，也可能是右栏已变窄而代码块仍从里面伸出来。开发者工具里分别看容器边界和代码块边界，判断是哪一种。前者改右栏 Flex 项的最小宽度；后者给代码块 overflow-x: auto，或根据内容类型允许换行。
.layout { display: flex; width: 100%; }
.left { flex: none; width: 200px; }
.right {
flex: 1;
min-width: 0; /* 先验证外层 Flex 项能否变窄 */
}
.right pre { overflow-x: auto; /* 再处理内层长代码 */ }右栏是否回到容器内，和代码行是否仍从右栏溢出，要分别观察。
先看盒子，再看内部绘制
最小内容宽度是内容在允许断行处尽量断开后仍不能再窄的宽度。white-space: nowrap、长 URL 或代码行都可能把它抬高。Flex 收缩计算出较小宽度后，默认的自动最小宽度可能把结果夹回去；将它设为零只改变项目盒子的尺寸边界，不会让不可断开的字符自动消失。诊断时也要确认容器实际有尺寸约束，否则它本来就会跟随内容扩张。
例如一个两栏布局，左栏固定 240px，右栏放 pre。先临时给右栏加背景色：如果背景色一直延伸到视口外，通常是右栏 Flex 项自己未缩小；如果背景色已经止于容器边界，但代码字形仍穿出，右栏盒子没有问题，应让 pre 自己滚动。给所有祖先一股脑加 overflow: hidden 虽然能遮住现象，也可能截掉焦点轮廓、下拉菜单和调试线索。
在多层嵌套 Flex 里，右栏的祖先也可能是另一个 Flex 项。只给最里层代码块设置滚动而外层仍有自动最小宽度时，页面依旧会越界。沿祖先链逐层看实际盒子宽度，找到第一个超过父容器的项目，再修改它的尺寸下限。
容易答错的地方
- 把所有横向溢出都归咎于
flex-shrink - 收缩因子、基准尺寸、自动最小宽度和内部绘制溢出都可能参与，先定位越界的是哪一个盒子。
- 改了外层就认为问题结束
- 项目能缩窄后，内部代码或图片仍可能越界，需要决定滚动、断行还是裁剪。
面试官还会怎么问？
什么是最小内容宽度？
内容在可断行处充分换行后，仍需要的最小宽度；连续不可断开的片段会决定它。
如何快速验证自动最小宽度？
在开发者工具里临时给可疑的直接 Flex 项加 min-width: 0，看盒子边界是否回到容器内。
什么时候不该用省略号？
代码、地址或关键数据需要完整读取时，内部滚动或换行通常比隐藏尾部更合适。
参考资料
示例用于理解所注明的运行环境与边界；延伸学习可结合原文中的更多案例。