When working on my web app, I faced an issue with a fixed div modal that takes up the entire screen. The problem is that the scrollbar for this modal is not visible, only the body scrollbar can be seen. It seems like the fixed div's scrollbar is positioned right behind the body scrollbar, making it difficult to navigate as I can only use arrow keys to move down while the body scrollbar remains in view instead of the fixed modal scrollbar.
.fixed_div{width:100vw; height:100vh; background-color:rgb(240,240,240); overflow-y:scroll !important; overflow-x:hidden; display:flex; flex-direction:column; position:fixed; top:0px; left:0px; bottom:0px; right:0px; z-index:99999999999999999999999999999999999999999999999999999999999999999999 !important;}
.body{margin:0px 0px 0px 0px; background-color:white; position:relative; display:flex; flex-direction:column; max-width:100%; min-height:100%; height:auto; overflow-x:hidden;}