根本原因是flex-shrink: 1默认生效+缺少min-width兜底+父容器未约束溢出；需对关键子项设flex-shrink: 0、min-width: 0，并在直接父容器加overflow-x控制。
双栏布局在超小屏（如 iPhone SE、部分安卓小屏机）上挤压变形，根本原因不是“屏幕太小”，而是 flex-shrink: 1 默认生效 + 缺少最小宽度兜底 + 父容器未约束溢出行为——三者叠加导致内容被强行压缩到失真。
为什么 flex-shrink: 1 在超小屏下特别危险
超小屏（max-width: 375px）下，即使两栏各设 flex: 1，浏览器仍会按默认 flex-shrink: 1 把子项往死里压：图标缩成点、文字挤成“…”、按钮宽高比崩坏。这不是弹性，是失控。
- 必须对关键子项显式设
flex-shrink: 0，比如带图标的按钮、头像、开关、短标签（“已读”“VIP”） -
flex-shrink: 0不影响flex-grow或排列顺序，只禁掉压缩逻辑 - 别写
* { flex-shrink: 0 }—— 这会让正常流式区域彻底失去响应能力 - IE10+ 需补
-ms-flex-negative: 0兼容
min-width 是防挤压的第二道防线
光关 flex-shrink 不够。如果子项初始尺寸远超容器（比如图片没配 max-width: 100%），它会直接溢出，flex-shrink: 0 只是不压缩，但不管溢出。
- 给所有可能撑破的子项加
min-width: 0（尤其是含文本的 flex 项），否则默认min-width: auto会锁死最小宽度，反而加剧错位 - 图片必须同时满足：
max-width: 100%+height: auto+flex-shrink: 0，三者缺一不可 - 避免混用
width: 200px和flex-basis: 50%，冲突时浏览器优先级混乱，容易误判初始尺寸
外层容器必须主动处理溢出和滚动
很多“挤压”其实是视觉假象：内容没被压扁，而是被横向溢出隐藏了。用户滑动才发现右边还有东西——这比真挤压更伤体验。
-
overflow-x: hidden必须加在**直接父容器**上，不是table或grid容器本身 - 若需横向滚动，用
overflow-x: auto+scrollbar-width: none（Firefox）+-webkit-scrollbar隐藏滚动条，但保留手势可滑 - 真机测试时注意：iOS 键盘弹出会临时缩小视口，
100vh失效，建议改用100dvh并 fallback 到100vh - 别依赖
padding-right: 17px补偿滚动条——不同系统滚动条宽度不同，应动态读取document.documentElement.clientWidth - document.body.clientWidth
超小屏修复的关键不在“怎么让它看起来像大屏”，而在于承认它的物理限制：宽度资源极度稀缺。flex-shrink: 0 是刹车，min-width: 0 是缓冲垫，overflow 控制是方向盘——三者不配齐，任何单点优化都会在真机横竖屏切换或键盘弹出时当场失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
