Html – Why does overflow text not work in modal box?

So, I’m trying to do a modal by doing this:

<div className='transaction-modal'>
   <div className='transaction-forms'>
      Content of the box modal here
   </div>
</div>

And I did this CSS for it:

.transaction-modal {
    background-color: rgba(61, 61, 61, 0.48);
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 2;

    display: flex;
    justify-content: center;
    align-items: stretch;

    overflow-y: scroll;
}

.transaction-forms {
    background-color: white;
    border-radius: 20px;
    padding: 40px;
    max-width: 611px;
    justify-content: stretch;
}

But when I tried to use a Lorem500 in the bottom of my modal box HTML, it overflows the box and the .transaction-forms doesn’t create any white background.

Why does this happen? I think it has something to do about the display: flex inside the .transaction-modal, but I just can’t figure out a solution for that.

the form modal
text overflowing the box modal

I want the text to extend the modal box, which means it would create more white background and it doesn’t overflows the box.