Chrome中overflow-y:auto窗口调整后滚动条未自动消失问题求助

是不是浏览器Bug？ #

这是Chrome 133.0.6943.142版本中flex布局的重绘/重排bug。当flex容器从窗口缩小的受限状态（触发滚动条）恢复到充足空间时，Chrome没有正确重新计算内部可滚动元素的可用高度，导致滚动条错误保留。Firefox不存在这个问题，说明是Chrome的实现缺陷。

解决办法 #

方案1：给外层flex容器加overflow: hidden（推荐） #

给最外层设置max-height:100vh的flex容器添加overflow: hidden样式，强制Chrome在窗口尺寸变化时重新计算内部元素的可用高度。修改后的代码：

<div style="display: flex; flex-direction: column; max-height: 100vh; width: 400px; overflow: hidden">

方案2：监听窗口resize事件手动触发重绘 #

通过JavaScript监听窗口大小变化，强制可滚动元素触发重排，让Chrome重新计算高度：
首先给可滚动的div添加类名方便选择：

<div class="scrollable" style="min-height: 0; overflow-y: auto; overflow-x: hidden">

然后添加JS代码：

window.addEventListener('resize', () => {
  const scrollEl = document.querySelector('.scrollable');
  // 触发重排的小技巧
  scrollEl.style.display = 'none';
  void scrollEl.offsetHeight;
  scrollEl.style.display = '';
});

方案3：调整flex容器的高度属性 #

把水蓝色div的min-height: 0替换为height: 100%，让Chrome更准确地计算内部元素的可用空间：

<div style="background-color: aqua; height: 100%; display: flex; flex-direction: column">

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