在 checkout 页面上，我在网站顶部做了一个覆盖，其中禁用了正文滚动，但在覆盖上启用了溢出.
但如果视区较小，则覆盖图上的内容将被剪裁.
如何避免这种情况？
我试图将overflow:auto添加到覆盖图中，但不起作用:
body {
overflow: hidden;
}
#overlay.active {
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
display: flex;
justify-content: center;
align-items: center;
padding: 20px;
overflow: auto;
background: yellow;
}<div id="overlay" class="active">
<div style="height:300px; background:white; padding:20px">
content
</div>
</div>UPDATE个
似乎在Content为的子项div上加margin: auto就可以解决这个问题:
#overlay > div { margin: auto; }
用safe比align-items会是一个很好的解决方案，但目前它只在Firefox上有效:
align-items: safe center;
示例:
body {
overflow: hidden;
}
/* ???? Added on the child div */
#overlay > div {
margin: auto;
}
#overlay.active {
position: fixed;
/* ???? Can use shorthand (Optional: not supported by older browsers and IE) */
inset: 0;
display: flex;
justify-content: center;
/* ???? Safe is only working on Firefox as of now */
align-items: safe center;
padding: 20px;
background: #fff;
overflow: auto;
background: pink;
}<div id="overlay" class="active">
<div style="height:300px; background:white; padding:20px">
content
</div>
</div>