During the checkout process, I implemented an overlay on top of the website that disables scrolling on the body but allows overflow on the overlay. However, the content on the overlay gets clipped if the viewport is too small. How can this issue be prevented? I attempted to solve it by adding overflow:auto to the overlay, but it was not effective:
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>