Header extends over scrollbar when width=100% - html

Question

My problem is with the width of a sticky header. It is extending horizontally over the vertical scrollbar on the right. So if the thumb of the scrollbar is at the top, and under the header, then you can't grab and drag it. Curiously the thumb appears to be on top of the header but if you try to grab and drag it, you will be selecting text rather than moving the scroll position.
Is there a way to fix this header width so that it's wide enough to cover the scrolling text but not so wide that it covers the scrollbar, or a way to put the scrollbar on top of the header?
https://codesandbox.io/s/fragrant-cookies-g9w4c
.App {
font-family: sans-serif;
text-align: center;
}
::-webkit-scrollbar {
width: 40px;
position: fixed;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
/* Track */
::-webkit-scrollbar-track {
box-shadow: inset 0 0 5px grey;
border-radius: 18px;
}
/* Handle */
::-webkit-scrollbar-thumb {
background: red;
border-radius: 18px;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: #b30000;
}
.sticky-heading {
background-color: aqua;
font-weight: bold;
font-size: 22px;
padding-top: 10px;
width: 100%;
position: fixed;
}
.list {
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
padding: 20px;
position: fixed;
background: #fff;
height: 100vh;
width: -webkit-fill-available;
overflow-x: hidden;
}
import React from "react";
import ReactDOM from "react-dom";
import "./styles.css";
function App() {
return (
<div className="App">
<div className="list">
<div>
<div>
<div className="sticky-heading">
This should not cover the scrollbar
</div>
<div>
{Array.from({ length: 300 }, () => {
return (
<div>
this must be covered by the heading when scrolling
<br />
</div>
);
})}
</div>
</div>
</div>
</div>
</div>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Answer 1

::-webkit-scrollbar {
width: 40px;
}
Given width of scrollbar is 40px & scrollbar present at right side of page , so add right:40px in:
.sticky-heading {
right: 40px; //or 30px whatever you want but more than scrollbar width
}

Answer 2

You can try to use this position: absolute; instead of position: fixed;
.sticky-heading {
background-color: aqua;
font-weight: bold;
font-size: 22px;
padding-top: 10px;
width: 100%;
position: absolute;
}
Is this what you want?