仅靠overflow: hidden无效，因右栏默认min-width:auto拒绝收缩，必须配合min-width:0、flex:1 1 0、width约束及word-break等样式才能真正截断溢出内容。
右侧内容溢出时为什么不能只靠 overflow: hidden
直接给右栏加 overflow: hidden 看似能“藏住”溢出，但实际常导致文字被截断、滚动条消失、长 URL 或表格撑破布局——因为 overflow 控制的是容器边界，不解决内容本身拒绝收缩的问题。尤其当右栏含 <table>、未设 <code>min-width: 0 的嵌套 flex 容器、或纯英文/数字串（无空格）时，浏览器默认按内容原始宽度渲染，overflow: hidden 只是把超出部分“盖住”，而非“压扁”。
flex: 1 必须搭配 min-width: 0 才生效
Flex 布局中，flex: 1 默认的 flex-basis 是 auto，意味着它会先尊重内容固有宽度；如果内容宽于剩余空间，它就不缩，反而溢出。真正起作用的是显式设 min-width: 0，强制允许压缩。
-
.right { flex: 1; min-width: 0; }—— 这是最小必要写法 - 若右栏含表格，额外加
table-layout: fixed; width: 100%;，否则<table> 按内容撑宽，无视 flex 分配 <li>若含长英文/URL，加 <code>word-break: break-word或overflow-wrap: break-word，仅break-all会破坏可读性 - 父容器没设
display: flex——flex: 1完全无效，退化为普通块级流 - 左栏只写了
width: 250px，没写flex: 0 0 250px—— 它可能被压缩，导致剩余空间计算错误 - 左栏或父容器有
padding/border且没设box-sizing: border-box—— 实际占用宽度 > 250px，右栏可用空间变少 - 右栏子元素用了
display: inline-block或float—— 它们会脱离 flex 主轴，不再受flex: 1约束 - 统一给所有参与 flex 布局的元素加
box-sizing: border-box - 避免在右栏上直接写
width—— 它会与flex: 1冲突，优先级混乱 - 测试时用真实设备或模拟 viewport 缩放，别只靠桌面浏览器 DevTools 的响应式模式
父容器和左栏的隐式约束必须检查
右栏“不肯缩”的根本原因，往往不在右栏本身，而在它的上下文。
Safari 和旧 WebView 下的盒模型陷阱
Safari 14–15、部分安卓 WebView 对 border 和 padding 更敏感：哪怕只漏一个 box-sizing: border-box，右栏就可能窄得看不见，或在窄屏下突然换行。
overflow: hidden 都只是表面功夫。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
