I've been struggling with configuring my modal to allow scrolling when the content overflows. I attempted to add "overflow: auto" to the modal, but it didn't seem to do the trick. It's important to note that I am not utilizing Bootstrap. One thing I did was include CSS to prevent the background from scrolling when the modal is open, and I suspect this might be causing the issue with scrolling the modal itself. Below is the CSS snippet I'm currently using.
#modal-background {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: var(--modal-background-color);
opacity: .50;
-webkit-opacity: .5;
-moz-opacity: .5;
filter: alpha(opacity=50);
z-index: 1000;
}
#modal-content {
background-color: var(--modal-content-background-color);
overflow: auto;
border-radius: 10px;
color: var(--modal-font-color);
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
box-shadow: 0 0 20px 0 #222;
-webkit-box-shadow: 0 0 20px 0 #222;
-moz-box-shadow: 0 0 20px 0 #222;
display: none;
height: auto;
width: auto;
left: 50%;
margin: -120px 0 0 -160px;
padding: 10px;
position: fixed;
top: 50%;
z-index: 1000;
}
Any assistance on this matter would be highly appreciated. Many thanks in advance.