title: scrollIntoView() moves the whole page layout up
body: <p>The whole page layout moves up when we use scrollIntoView(true). For my requirement I need to use true parameter. I need to avoid this move. I posted a working copy of this code in <a href="https://jsfiddle.net/7v4t31p0/" rel="nofollow noreferrer">https://jsfiddle.net/7v4t31p0/</a> Thank you in advance.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.body {
    display: flex;
    width: 100%;
    border: 1px solid gray;
  }
  
  .left {
    flex: 0 0 200px;
  }
  
  .right {
    flex: 1 1 auto;
    border: 1px solid green;
  }
  
  .details {
    display: flex;
    width: 100%;
  }
  
  .links {
    display: flex;
    flex-direction: column;
  }
  
  .content {
    max-height: 100px;
    overflow-y: auto;
    flex: 1 1 auto;
  }
  
  .content div {
    min-height: 100px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div&gt;
    &lt;div&gt;
      Header
    &lt;/div&gt;
    &lt;div class="body"&gt;
      &lt;div class="left"&gt;
        Left panel
      &lt;/div&gt;
      &lt;div class="right"&gt;
        &lt;div class="details"&gt;
          &lt;div class="links"&gt;
            &lt;button id='btn1'&gt;link 1&lt;/button&gt;
            &lt;button id='btn2'&gt;link 2&lt;/button&gt;
            &lt;button id='btn3'&gt;link 3&lt;/button&gt;
          &lt;/div&gt;
          &lt;div class="content"&gt;
            &lt;div id="content1"&gt; Content 1&lt;/div&gt;
            &lt;div id="content2"&gt; Content 2&lt;/div&gt;
            &lt;div id="content3"&gt; Content 3&lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>