模态框内容过多居中导致显示不全问题

Question

模态框高度是内容撑开的，我的模态框是用transform: translateY()做居中处理的，可是如果内容太多，模态框的height比浏览器高度高，那么模态框头尾部分就会显示不出来

<div class="mask"></div>
<div class="modal">
    <div class="modal-content">模态框内容</div>
</div>

.mask{
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0, 0, 0, 0.4);
z-index: 9;

}
.modal{

width: 500px;
position: absolute;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);
background-color: #fff;
z-index: 10;
text-align: center;
border-radius: 5px;

}
.modal .modal-content{

height: 800px;

}

Answer 1

设定个最大高度, 超出滚动呗