Header div stays at top, vertical scrolling div below with scrollbar only attached body

Question

Here I'm using bootstrap class for the sticky top header.

header.js

<header className="header sticky-top">HEADER</header>

stylesheet

header {
  overflow: hidden;
  padding: 20px 10px;
  display: inline-flex;
  width: 100%;
  height: fit-content;
  background-color: blue;
}

body {
  margin: 0;
  height: 100vh;
  overflow:auto;
  scroll-behavior: smooth;
}

This is what I wanted to achive.

______________________
|_______header_______|
|                  |*|
|   Container Div  |*|
|                  |*|
|                  |*|
|                  |*|
|                  |*|
|                  |*|
----------------------

* = scrollbar

This is the example project to work on demo code sandbox

Answer 1

You need to import the header component into your app like:

import Header from "./pages/Header";

and actually use it in the JSX:

function App() {
  return (
    <div className="App">
      <Header></Header>

Also to see this in actin the content needs scroll: