使用 JavaScript 更新子元素显示时如何避免水平滚动条？

Question

请看下面的片段。

i = 0;
divs = document.querySelectorAll("#grid > div");
divs[1].addEventListener("click", function() {
  if (i++ % 2) {
    divs[1].innerHTML = "LOREM IPSUM";
  } else {
    divs[0].setAttribute("class", "show-children");
  }
});

#grid {
  height: 100px;
  display: grid;
  grid-template: 1fr / auto minmax(0, 1fr);
  background: pink;
}

#grid>div:first-child {
  grid-row: 1 / 2;
  grid-column: 1 / 2;
}

#grid>div:last-child {
  grid-row: 1 / 2;
  grid-column: 2 / 3;
}

#grid>div:first-child {
  background: yellow;
  overflow: auto;
}

#grid>div:last-child {
  background: cyan;
}

#grid>div:first-child div {
  margin: 10px;
  white-space: nowrap;
  display: none;
}

#grid>div.show-children div {
  display: block;
}

<div id="grid">
  <div>
    <div>A B C D E F G</div>
    <div>A B C D E F G</div>
    <div>A B C D E F G</div>
    <div>A B C D E F G</div>
  </div>
  <div>CLICK ME TWICE (SLOWLY)</div>
</div>

如您所见，我们在网格布局中并排放置了两个

div

元素。 “左”

div

在开始时隐藏了子元素，而“右”

div

由于

fr

单元而增长。

此外，“右”

div

元素可单击两次，以便 1) 显示隐藏的子元素，2) 更新“右”

div

元素的内容。问题（出现在 Chrome 版本 111.0.5563.64，Ubuntu 上）是意外的水平滚动条出现在第一次点击时（显示隐藏的子元素时）并在第二次点击时消失（当“正确的”

div

元素的内容更新时）。

初始状态：

第一次点击后：

第二次点击后：

您知道为什么会发生这种情况以及我该如何解决它吗？

对不起，标题不好，我尽力了：-\