flex可滚动容器无calc/绝对值高度时不显示滚动条问题排查

flex容器必须设置固定绝对值高度才能显示垂直滚动条，本质是容器没有拿到确定的、可被内容溢出的高度约束，这类问题基本都是以下几个原因导致的：

• 百分比高度链路断裂：height: 100%生效的前提是从根节点到当前容器的每一层父元素都有明确高度定义，只要中间有一层是默认的height: auto，子元素的百分比高度就会失效，最终容器会被内容直接撑开，不存在溢出场景自然不会出现滚动条。很多人只给相邻父级设置高度，漏了html、body、顶层布局容器、路由出口容器这些上层节点的高度定义，就会卡在这里。
• 未重置flex子项的默认最小高度：flex布局的直接子元素默认带min-height: auto规则，这个规则会强制子元素高度不能小于内部内容的最小高度，哪怕给子项设置了flex: 1，它也会被内容撑得超出父级分配的空间，不会触发溢出滚动，这是flex滚动场景最高发的坑。
• 父级flex容器本身无确定高度：flex: 1是按父级剩余空间分配高度，如果父级flex容器自己的高度都是随内容自适应的，子项分到的高度也会跟着内容走，无法生成固定的高度边界。
• 非标准属性兼容问题：代码中写的overflow: overlay是Chromium系的非标准属性，在部分浏览器版本里，如果容器高度是靠flex计算出的非绝对值，这个属性会直接把溢出内容当作正常流渲染，不会生成滚动条。

不需要硬写calc(100vh - 多段固定高度)这种维护性很差的写法，按以下步骤修改即可彻底解决：

1. 补全高度链路：从html, body开始，到嵌套的每一层布局容器，逐层加上height: 100%，不要出现高度断层。单页应用别忘了给应用挂载节点、路由布局容器也加上该属性。
2. 重置flex子项的最小高度：给滚动容器加上min-height: 0，覆盖默认的min-height: auto规则，让容器可以正常收缩到flex分配的高度，内容溢出时自然会触发滚动。
3. 把非标准的overflow: overlay换成标准的overflow-y: auto，如果需要悬浮滚动条不占位的效果，可以做渐进增强，不要把非标准属性作为主属性使用，避免兼容问题。

修正后的核心代码参考：

/* 根据自身项目的布局结构补全选择器，打通高度链 */
html, body, #app, .外层布局容器类名 {
  height: 100%;
  margin: 0;
}

.virtual-list__root-container {
  overflow-y: auto;
  overflow-x: hidden;
  flex: 1;
  min-height: 0; /* 核心修复项 */
}

修改完成后不需要手动计算高度，不管上层工具栏高度怎么调整，滚动容器都会自动占满剩余空间，正常触发滚动。

内容的提问来源于stack exchange，提问作者AlekseyHoffman