为什么溢出文本在模态框中不起作用？

Question

所以，我试图通过这样做来制作模态：

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

我为它做了这个CSS：

.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;
}

但是当我尝试在模式框 HTML 底部使用 Lorem500 时，它会溢出框，并且

.transaction-forms

不会创建任何白色背景。

为什么会出现这种情况？我认为这与

display: flex

内的

.transaction-modal

有关，但我就是想不出解决方案。

表单模态 文本溢出框模态

我希望文本扩展模式框，这意味着它将创建更多白色背景并且不会溢出框。

Answer 1

在事务模式类中尝试使用

align-items: center;

而不是

align-items: stretch;

。