所以,我试图通过这样做来制作模态:
<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
有关,但我就是想不出解决方案。
我希望文本扩展模式框,这意味着它将创建更多白色背景并且不会溢出框。
在事务模式类中尝试使用
align-items: center;
而不是 align-items: stretch;
。