title: Scroll into view element hides behind header
body: <p>I am making a react application where on click over an item below select box the respective item in next section gets scrolled.</p>
  <p><strong>Working Example for above said scenario:</strong> <a href="https://codesandbox.io/s/scroll-into-view-in-react-7xtq9" rel="nofollow noreferrer">https://codesandbox.io/s/scroll-into-view-in-react-7xtq9</a></p>
  <p>Eg: Click on Item two, then its respective field set will gets scrolled to top..</p>
  <p><strong>Issue:</strong></p>
  <p>-&gt; Now the requirement is that I need to add a header and below the header, both the sections needs to be displayed.</p>
  <p>-&gt; I have added <code>style={{ marginTop: &quot;100px&quot; }}</code> to the container div like,</p>
  <pre><code>   &lt;div id=&quot;container&quot; style={{ marginTop: &quot;100px&quot; }}&gt;
      &lt;div className=&quot;_2iA8p44d0WZ&quot;&gt;
        &lt;span className=&quot;chip _7ahQImy&quot;&gt;Item One&lt;/span&gt;
        &lt;span className=&quot;chip _7ahQImy&quot;&gt;Item Two&lt;/span&gt;
        &lt;span className=&quot;chip _7ahQImy&quot;&gt;Item Three&lt;/span&gt;
        &lt;span className=&quot;chip _7ahQImy&quot;&gt;Item Four&lt;/span&gt;
        &lt;span className=&quot;chip _7ahQImy&quot;&gt;Item Five&lt;/span&gt;
        &lt;input
          type=&quot;text&quot;
          className=&quot;searchBox&quot;
          id=&quot;search_input&quot;
          placeholder=&quot;Select&quot;
          autoComplete=&quot;off&quot;
          value=&quot;&quot;
        /&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  </code></pre>
  <p>-&gt; This makes the container to display below header.</p>
  <p><strong>1)</strong> -&gt; But when I click on any item, then this <code>container</code> div gets hidden behind fixed header.</p>
  <p><strong>2)</strong> -&gt; Also the scrolled element as well gets hidden behind header.</p>
  <p><strong>Expected Result:</strong></p>
  <p>-&gt; The container section and the scrolled element needs to be visible from top even if any of the item was clicked.</p>
  <p>-&gt; To be simple it <strong>should not</strong> hide behind header and needs to be displayed below header.</p>
  <p><strong>Current working example:</strong></p>
  <p><a href="https://codesandbox.io/s/scroll-into-view-in-react-forked-kmjzh?fontsize=14&amp;hidenavigation=1&amp;theme=dark" rel="nofollow noreferrer"><img src="https://codesandbox.io/static/img/play-codesandbox.svg" alt="Edit scroll-into-view-in-react (forked)" /></a></p>