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://codesandbox.io/s/scroll-into-view-in-react-7xtq9

Eg: Click on Item two, then its respective field set will gets scrolled to top..

Issue:

-> Now the requirement is that I need to add a header and below the header, both the sections needs to be displayed.

-> I have added style={{ marginTop: "100px" }} to the container div like,

   <div id="container" style={{ marginTop: "100px" }}>
    <div className="_2iA8p44d0WZ">
      <span className="chip _7ahQImy">Item One</span>
      <span className="chip _7ahQImy">Item Two</span>
      <span className="chip _7ahQImy">Item Three</span>
      <span className="chip _7ahQImy">Item Four</span>
      <span className="chip _7ahQImy">Item Five</span>
      <input
        type="text"
        className="searchBox"
        id="search_input"
        placeholder="Select"
        autoComplete="off"
        value=""
      />
    </div>
  </div>

-> This makes the container to display below header.

1) -> But when I click on any item, then this container div gets hidden behind fixed header.

2) -> Also the scrolled element as well gets hidden behind header.

Expected Result:

-> The container section and the scrolled element needs to be visible from top even if any of the item was clicked.

-> To be simple it should not hide behind header and needs to be displayed below header.

Current working example:

Answer

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>