Scroll Into View Element Hides Behind Header

I am making a react application where on click over an item below select box the respective item in next section gets scrolled. Working Example for above said scenario: https://cod

Solution 1:

I believe you need to apply the styles to the outer container that is wrapping the container you want scrollable. This is the div rendering both the fixed position header and the content.

To the outer div

1. Add the margin-top: 100px to push content down.
2. Set a height that restricts the content from just expanding the height automatically, height: calc(100vh - 100px), the height of the view window minus the height of the header. Note: In the codesandbox I tweaked to 99vh to keep the window's scrollbar from appearing, so you'll likely need to tweak these values for your real code.
3. Hide the overflowing content and automatically display scrollbars when overflow occurs, overflow: auto.
4. Remove the in-line style prop from the inner content div.

Code

<div
  style={{
    marginTop: "100px",
    height: "calc(99vh - 100px)",
    overflow: "auto"
  }}
>
  {/* Nav */}
  <div id="container">
    <div className="_2iA8p44d0WZ">
      // content
    </div>
  </div>
  {/* fieldsets */}
</div>