overflow-y Scroll Visible on Custom Modal but is Not Functioning-CodePudding

I have a custom modal in my angular app. In the body I want to layout the terms and conditions (it will be lengthy) so I need the body portion of the modal to be able to scroll. The problem is currently the scroll bar is visible but its acting as if its disabled -- it wont move even though content is definitely overflowing.

Here's how it looks: https://i.stack.imgur.com/Lgl9p.png

And here's my code:

HTML:

<section id="modal">
    <div class="backdrop">
        <cel-dialog [backdrop-dismiss]="true" class="modal-dialog">
            <div class="modal-container">
                <div class="modal-header d-flex justify-content-between align-items-center">
                    <h3 class="title">Conditions of Demo Account Access</h3>
                    <div class="close-modal-button">X</div>
                </div>
                <div class="modal-body">
                    <div class="test">Boedy</div>
                    <div class="test">Boedy</div>
                    <div class="test">Boedy</div>
                    <div class="test">Boedy</div>
                    <div class="test">Boedy</div>
                    <div class="test">Boedy</div>
                    <div class="test">Boedy</div>
                    <div class="test">Boedy</div>
                    <div class="test">Boedy</div>
                    <div class="test">Boedy</div>
                    <div class="test">Boedy</div>
                    <div class="test">Boedy</div>
                    <div class="test">Boedy</div>
                    <div class="test">Boedy</div>
                    <div class="test">Boedy</div>
                    <div class="test">Boedyzzzz</div>
                    <div class="test">Boedy</div>
                    <div class="test">Boedy</div>
                    <div class="test">Boedy</div>
                    <div class="test">Boedy</div>
                    <div class="test">Boedy</div>
                    <div class="test">Boedy</div>
                </div>
                <div class="modal-footer">Footer</div>
            </div>
        </cel-dialog>
    </div>
</section>

CSS:

.backdrop {
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0px;
    left: 0px;
    background: rgba(0, 0, 0, 0.75);
}
.modal-dialog {
    width: 600px;
    height: 250px;
    position: fixed;
    margin: 10% auto;
    left: 0;
    right: 0;
    box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.5);
    border-radius: 3px;
    background: var(--white);
}

.modal-container {
    min-height: 0;
    height: 250px;
    width: 100%;
}

.modal-header {
    height: 20%;
    background-color: var(--blueDark);
    color: white;
}

.modal-body {
    height: 70%;
    overflow-y: auto;
}

.modal-footer {
    height: 10%;
    background-color: black;
}

.modal-header .title {
    margin-left: 10px;
}
.modal-header .close-modal-button {
    margin-right: 10px;
}

CodePudding user response：

pointer-event in class .modal-dialog of _modal.scss is set to "none" you can change this in this way:

.modal-dialog {
   .
   .
   .
   /* Add Line Below */
   pointer-events:unset !important;
}