Why does el.scrollIntoView() cause the whole container to move?

I have nested overflow-y: auto elements, with a full page which is scrollable, and the sidebar which is independently scrollable. When I hover on something in the main content area, I want the sidebar nav link to scroll into view (to the top or center, if possible), but when I call sideBarNavLink.scrollIntoView(), it scrolls the entire content/page so the whole content goes up and is cut off on the bottom. My page is relatively complicated to reproduce.

Is there some trick to making scrollIntoView reliable and work as you’d expect? Do I need position: relative and stuff like that to get it to work or something? Or do I need to roll my own scroll into view function?

$(document).ready(() => {
  $('.link').click((e) => {
    e.currentTarget.scrollIntoView({ behavior: 'smooth', block: 'start' })
  })
})

.page {
  padding: 16px;
  background: yellow;
  display: flex;
  width: 100%;
  height: 300px;
  overflow-y: auto;
}

.content {
  padding: 16px;
  background: blue;
  flex: 1;
}

.sidebar {
  padding: 16px;
  background: pink;
  overflow-y: auto;
  height: 100%;
  width: 200px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<div class="page">
  <div class="sidebar">
    <ul>
      <li class="link">a</li>
      <li class="link">a</li>
      <li class="link">a</li>
      <li class="link">a</li>
      <li class="link">a</li>
      <li class="link">a</li>
      <li class="link">a</li>
      <li class="link">a</li>
      <li class="link">a</li>
      <li class="link">a</li>
      <li class="link">a</li>
      <li class="link">a</li>
      <li class="link">a</li>
      <li class="link">a</li>
      <li class="link">a</li>
      <li class="link">a</li>
      <li class="link">a</li>
      <li class="link">a</li>
      <li class="link">a</li>
      <li class="link">a</li>
      <li class="link">a</li>
      <li class="link">a</li>
      <li class="link">a</li>
      <li class="link">a</li>
      <li class="link">a</li>
      <li class="link">a</li>
      <li class="link">a</li>
      <li class="link">a</li>
      <li class="link">a</li>
      <li class="link">a</li>
      <li class="link">a</li>
      <li class="link">a</li>
      <li class="link">a</li>
      <li class="link">a</li>
      <li class="link">a</li>
      <li class="link">a</li>
      <li class="link">a</li>
      <li class="link">a</li>
      <li class="link">a</li>
      <li class="link">a</li>
      <li class="link">a</li>
      <li class="link">a</li>
    </ul>
  </div>
  <div class="content">
    <p>hello world</p>
    <p>hello world</p>
    <p>hello world</p>
    <p>hello world</p>
    <p>hello world</p>
    <p>hello world</p>
    <p>hello world</p>
    <p>hello world</p>
    <p>hello world</p>
    <p>hello world</p>
    <p>hello world</p>
    <p>hello world</p>
    <p>hello world</p>
    <p>hello world</p>
    <p>hello world</p>
    <p>hello world</p>
    <p>hello world</p>
    <p>hello world</p>
    <p>hello world</p>
    <p>hello world</p>
    <p>hello world</p>
    <p>hello world</p>
    <p>hello world</p>
    <p>hello world</p>
    <p>hello world</p>
    <p>hello world</p>
    <p>hello world</p>
    <p>hello world</p>
    <p>hello world</p>
    <p>hello world</p>
    <p>hello world</p>
    <p>hello world</p>
    <p>hello world</p>
    <p>hello world</p>
    <p>hello world</p>
    <p>hello world</p>
    <p>hello world</p>
    <p>hello world</p>
    <p>hello world</p>
  </div>
</div>

Notice when you click on an “a” (a .link class), it scrolls the whole StackOverflow post into view! Why…