Chrome添加动态内容时滚动条异常问题

首先同步一个重要的版本更新信息：
2018年4月27日更新：这个滚动条显示异常的问题，在Chrome v66版本里已经被官方修复了，我在该版本中反复测试都无法重现这个bug。

回到你描述的场景：

我的Web应用中有异步加载内容的自定义上下文菜单，这些菜单是固定尺寸的flex容器，超出容器的内容应触发滚动条显示（实现示例如下）。但滚动条会显示在容器外部，除非通过调整窗口大小等方式强制页面重绘……

如果需要兼容Chrome v66之前的旧版本，或者在其他浏览器碰到类似问题，可以试试下面几个临时修复方案：

方案1：强制触发容器重绘 #

在异步内容加载完成后，通过简单的样式切换让浏览器重新计算容器布局：

const menu = document.querySelector('.your-flex-menu-container');
// 先隐藏容器，触发重绘后再恢复
menu.style.display = 'none';
menu.offsetHeight; // 这一步会强制浏览器重新计算元素尺寸
menu.style.display = '';

方案2：延迟设置overflow属性 #

不要提前给容器设置overflow-y: auto，等异步内容完全渲染到DOM里之后，再动态添加这个样式：

// 假设loadMenuContent是你的异步加载函数
loadMenuContent().then(() => {
  document.querySelector('.your-flex-menu-container').style.overflowY = 'auto';
});

方案3：给flex容器添加布局约束 #

如果是垂直方向的flex布局，给容器加上min-height: 0（如果是水平滚动则用min-width: 0），这能让flex容器正确约束内部元素的尺寸，避免内容溢出后滚动条错位：

.your-flex-menu-container {
  display: flex;
  flex-direction: column;
  width: 200px;
  height: 300px;
  min-height: 0; /* 关键属性 */
  overflow-y: auto;
}

问题根源 #

这个bug本质上是旧版Chrome在处理异步加载内容的flex容器时，没有自动触发布局重计算，导致滚动条的位置计算错误。强制重绘或者调整布局约束，能让浏览器重新计算容器的可用空间，从而让滚动条正确显示在容器内部。

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