直接原因是flex-shrink:1默认启用，导致虚拟滚动中子项被等比压缩；必须同时设flex-shrink:0和明确height/min-height（如height:80px），禁用收缩并锁定尺寸，缺一不可。
为什么Flexbox在虚拟滚动里会让子项“缩成一团”
直接原因就是 flex-shrink: 1 —— Flex 项目默认允许收缩。虚拟滚动只挂载几十个 div，但它们被塞进一个固定高度的容器（比如 height: 600px），一旦总内容宽度/高度超限，Flexbox 就会按比例压缩每个子项，导致文字换行、图标变形、itemHeight 计算失准，进而让滚动定位偏移、视口跳动。
禁用收缩 + 显式尺寸控制是底线操作
必须同时做两件事，缺一不可：
-
flex-shrink: 0关掉默认收缩行为（仅对子项设置，不是容器） - 给子项设明确的
height或min-height，且不能依赖内容撑开（否则高度不可预测） - 若用
flex-direction: column做垂直虚拟滚动，确保容器有height，子项用height而非width控制主轴尺寸
常见错误写法：.item { flex: 1; } 或 .item { width: 100%; }（在 column 容器里 width 无效）；正确写法示例：.item { flex: none; height: 80px; }
避免用 flex-basis 替代固定高度
flex-basis 看似灵活，但在虚拟滚动中是隐患：
立即学习“前端免费学习笔记（深入）”；
- 设为
flex-basis: auto→ 回退到内容高度 → 不定高 → 滚动条抖动 - 设为
flex-basis: 80px→ 表面可行，但若子项内有min-height: 100%或align-self: stretch，仍可能拉伸破坏布局 - 真正稳定的是
height: 80px+flex-shrink: 0+flex-grow: 0的组合
注意：如果列表项高度不完全一致，就别硬套 Flexbox 做虚拟滚动——该切回 position: absolute + top 定位方案。
横向滚动虚拟化时的 Flexbox 特别陷阱
横向长列表（如时间轴、标签栏）用 Flexbox 实现虚拟滚动，最容易栽在容器溢出和子项截断上：
- 容器必须设
overflow-x: auto，且不能设white-space: nowrap（它会干扰 Flex 排列） - 子项禁止设
flex: 1或flex-grow: 1，否则所有项被强制等宽，失去原始尺寸 - 推荐写法：
.container { display: flex; overflow-x: auto; } .item { flex: none; width: 120px; flex-shrink: 0; } - Chrome DevTools 的 Layout 面板里勾选 “Flexbox overlay”，能实时看到子项是否被压缩或错位
不定高、动态插入、带图片懒加载的列表，Flexbox 不是银弹——它解决不了高度推算问题，这时候 grid-auto-rows 或纯绝对定位才是更可控的选择。
