参考我的评论，我更新了你的Javascript代码来计算滚动条的宽度，将结果添加到child中。样式。宽度等去掉差距。

const parent = document.getElementById( "parent" );
const child = document.getElementById( "child" );

/* Create a temporary element to calculate
   the scrollbar width; then delete it.
*/
const scrollBarWidth = () => {
  let el, width;
  el = document.createElement( "div" );
  el.style.cssText = "position:absolute; visibility:hidden; overflow:scroll;";
  document.body.appendChild( el );
  width = el.offsetWidth - el.clientWidth;
  el.remove();
  return width;
}

const matchDimensions = () => {
  child.style.width = parent.offsetWidth + scrollBarWidth + "px";
  child.style.height = parent.offsetHeight + "px";
};

matchDimensions();
window.addEventListener( "resize", matchDimensions );

html, body, #parent {
    width: 100%;
    height: 100%;
    margin: 0;
}

#child {
    background: red;
}

<div id="parent">
    <div id="child"></div>
</div>

可能浏览器有一些默认的样式设置，因为它会随着视口的大小而改变行为。
您可以尝试使用css reset（一个例子）或normalize来看看是否可以解决这个问题。

这里的问题很可能是由浏览器如何处理子像素渲染引起的，这可能会导致元素大小的微小波动。要解决这个问题，请使用数学。round（）函数将宽度和高度值四舍五入到最接近的整数。以下是如何更改matchDimensions（）函数来实现这一点：
JavaScript：

const matchDimensions = () => {
  child.style.width = Math.round(parent.offsetWidth) + "px";
  child.style.height = Math.round(parent.offsetHeight) + "px";
};

这应该有助于消除Firefox和Edge中出现的右侧白色间隙。此外，如果需要保留父元素的边距，可以添加框大小规则，以便在计算元素的总宽度和高度时包括边距：
CSS：

html, body {
  margin: 0;
  height: 100%;
}

#parent {
  width: 100%;
  height: 100%;
  margin: 0;
  box-sizing: border-box;
}

#child {
  background: red;
  width: 100%;
  height: 100%;
}

通过这些修改，子元素应该动态调整大小以匹配父元素的尺寸，而不会出现任何间隙或像素偏移问题。

我想我弄明白了。简单的解决方法是将overflow: hidden添加到父节点，这实际上是有意义的。由于子元素有固定的宽度，当页面调整大小时，首先要改变的是父元素，但是由于固定的宽度，子元素不能移动，因此它溢出到主体之外，这增加了一个滚动条。然后，事件被滚动条触发，因为父级的宽度现在小得多，子级继承了它，这阻止了它溢出，因此滚动条消失了。显然，这发生得非常快，这就是为什么它不明显。这也解释了为什么它只发生在收缩窗口而不是扩展窗口的时候，因为扩展窗口不会导致溢出。