css - 无法使用模态滚动到顶部并使用 display flex 覆盖

Question

我有一个带有背景覆盖的模态，这是我的例子:

https://codepen.io/tyrellrummage/full/XeRQYm/

(缩小窗口以查看顶部和底部溢出)。

基本结构是:

<div class="overlay">
    <div class="modal">
        //content
    </div>
</div>

和当前样式:

.overlay{
    display: flex;
    align-items: center;
    justify-content: center;
    overflow-y: scroll;
}

.modal{
    margin: 4rem 0;
}

这适用于模态框的底部，但顶部会被修剪(切掉)。如何仅使用 CSS 解决此问题？

Answer 1

关于为什么会发生这种情况的非常详尽的解释可以阅读 in this awesome answer .

适用于您的情况，您需要将 .modal 的 top 和 bottom 边距设置为 auto。

这意味着您需要将 4rem 边距作为 .overlay 的 padding。

反过来，这意味着您还需要对其应用 box-sizing:border-box，因此填充从高度中减去，而不是添加，导致:

.modal { 
  margin: auto 0;
}
.overlay{ 
  padding: 4rem 0;
  overflow-y:auto;
  box-sizing: border-box;
}