Javascript 如何强制可折叠容器向下生长，而不是向上生长？

我有一个行为异常的可折叠容器问题（仅在Chrome中）

我有两个按钮，单击后，可以更改可折叠容器的高度

当容器位于页面顶部时，两个按钮（可折叠容器的上方和下方）都会导致容器向下生长

当容器位于页面下方时，容器上方的按钮会使容器向下生长。但是容器下面的按钮会使容器长大

我正在努力使Chrome的行为与Safari相同。两个按钮都会导致容器变小

我有一个代码笔，在那里我复制了以下行为：

HTML

<div class="container">
  <div class="row">
    <div class="col">
      <h1>Collapsible Testing</h1>
      
<!-- 
Odd, this spacing seems to change the height expanding behavior 
       -->

      <p>Scroll down to see the buttons</p>
      <br> <br> <br> <br> <br> <br> <br> <br>
      <br> <br> <br> <br> <br> <br> <br> <br>
      <br> <br> <br> <br> <br> <br> <br> <br>
      <br> <br> <br> <br> <br> <br> <br> <br>
      <br> <br> <br> <br> <br> <br> <br> <br>
      
      <button data-toggle="collapsible">Click Me</button>
      <div class="collapsible">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
      <button data-toggle="collapsible">Click Me</button>
      
      
      
    </div>
  </div>
</div>

JS

.container {
  height: 8000px; /* tall page */
}

.collapsible {
  height: 0;
  overflow: hidden;
  transition: height 3s;
}

const buttons = document.querySelectorAll("[data-toggle=collapsible]")
for (i = 0; i < buttons.length; i++) {
  buttons[i].addEventListener("click", function(e) {
    const collapsible = document.querySelector(".collapsible");
    if (collapsible.classList.contains("expanded")) {
      collapsible.classList.remove("expanded"); 
      collapsible.style.height = '0px';
    } else {
      collapsible.classList.add("expanded"); 
      collapsible.style.height = collapsible.scrollHeight + 'px';
    }
  })
}

const buttons=document.queryselectoral（“[data toggle=collapsable]”）
对于（i=0；i

只是为了让它更像一个奇怪的bug。如果将+tab从底部按钮移到顶部按钮，则滚动行为会在过渡期间发生更改。