Solution 1 :

You have to set the height of the .modal-body in and give it overflow-y: auto. Also reset .modal-dialog overflow value to initial.

Problem :

In my web app I want to have a fixed div modal which occupies the whole screen, however this modal’s scrollbar is not visible, instead only the body scrollbar is visible. I assume my fixed div scrollbar is right behind the body scrollbar, this makes it so I can only use arrow keys to navigate down while seeing the body scrollbar instead of 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;}


Comment posted by AmitJS94

add a js fiddle demo

Comment posted by gabogabans

The modal is overflowing however the isssue is I can’t see the scrollbar of my modal… I see the body scrollbar instead. Z-index ain’t helping…