【发布时间】:2022-12-03 18:16:08
【问题描述】:
On a checkout page I make an overlay on top of the website where scroll on body is disabled, but overflow is enabled on the overlay
But if the viewport is smaller the content on the overlay is clipped
How to avoid that?
I already added overflow:auto to the overlay
https://jsfiddle.net/vu4sz89p/1/
<div id=\"overlay\" class=\"active\">
<div style=\"height:300px; background:white; padding:20px\">
content
</div>
</div>
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;
background:#fff;
overflow:auto;
background:yellow;
}