根本原因是默认min-width: auto强制子项不低于内容最小宽度，必须在直接参与弹性分配的子元素上显式设min-width: 0（横向）或min-height: 0（纵向），否则flex-shrink: 1无法触发。
flex-shrink: 1写了但子项就是不缩
根本原因不是 flex-shrink 没生效，而是浏览器默认给每个 Flex 项目加了 min-width: auto（即 min-content），强制它至少容纳内部最长单词、未约束的 <img> 或整段文本。哪怕你写了 flex-shrink: 1，只要内容宽度 > 可用空间，它就卡死在最小内容宽，收缩逻辑压根不触发。
必须在「直接参与弹性分配」的子元素上显式写：min-width: 0（横向布局）或 min-height: 0（纵向）。不是加在父容器，也不是加在孙子层——用 DevTools 的 Computed 面板确认值是 0 才算生效。
-
min-width: 0是开关，flex-shrink: 1是指令，两者缺一不可 - 如果子项本身也是
display: flex，它的子级也得单独加一遍min-width: 0 - 对
<input>这类替换元素，还要额外在它自身加min-width: 0，因为 UA 样式可能设了min-width: 130px
用了 flex: 1 却发现右侧栏缩不进窄屏
flex: 1 看似简单，实际等价于 flex: 1 1 0%，其中 flex-basis: 0% 表示从零开始分剩余空间。但问题常出在：左右栏有长文本、未设 max-width: 100% 的图片，或 white-space: nowrap ——这些内容会顶开整个分配过程，导致中间栏“没空间可分”。
真正起效的组合是：
- 父容器
display: flex必须存在且未被覆盖（检查 Computed Styles） - 需要收缩的子项写
flex: 1 1 0%+min-width: 0 - 子项内含文本时，加
white-space: nowrap+overflow: hidden+text-overflow: ellipsis - 子项内含
<img>时，必须同时加max-width: 100%和height: auto
小屏下横向滚动却查不到溢出源
很多开发者盯着 flex-shrink 调了一小时，最后发现横向滚动是因为 flex-direction: row 本身就不适配窄屏。尤其当内容含长 URL、连续英文或未处理的图标字体时，flex-wrap: wrap 也救不了——换行不等于压缩，视觉上还是断层。
更稳妥的做法是默认用垂直流：
- 主容器设
flex-direction: column，让内容自然堆叠 - 只在
@media (min-width: 768px)里切回row - 避免在小屏下强行维持
flex-shrink: 0，它会让元素彻底拒绝让步，代价就是必然溢出
响应式缩放后比例失衡，刷新才恢复
浏览器缩放（Ctrl + 鼠标滚轮）不是窗口 resize，不会触发常规的媒体查询重排，但会改变设备像素比和字体渲染尺寸。此时 Flex 项目若依赖 flex-basis: auto（即按内容宽计算基准），就会因文字重排产生微小差异，导致左右栏比例漂移。
稳定做法是统一用百分比或固定值作为 flex-basis：
- 左侧栏：
flex: 0 1 240px（不放大、可缩小、基准 240px） - 中间栏：
flex: 1 1 0%+min-width: 0 - 右侧栏：
flex: 0 1 240px，再加min-width: 240px防极端压缩
关键点在于：所有参与比例分配的项，flex-basis 类型要一致；min-width: 0 不是可选项，是每个可缩项的必填项——漏掉任意一层，收缩链就断在那一环。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
