我try 创建一个在页面上弹出的菜单.菜单的高度是可变的，可以大于视区和/或页面内容.以下是简化的代码:
* {
margin: 0;
}
#overlay {
min-height: 100%;
width: 100%;
position: fixed;
background: rgba(0, 0, 0, 0.7);
display: flex;
align-items: start;
justify-content: center;
}
#popup {
margin: 50px;
height: 50vh;
width: 300px;
border: 1px solid red;
background-color: blue;
}<div id="overlay">
<div id="popup">
</div>
</div>
<div id="content">
Page content
</div>当页面内容大于视区高度时，即使覆盖在屏幕上，用户也可以滚动页面:
https://jsfiddle.net/Imabot/ydmwLo2j/1/个
另一方面，当菜单大于视区高度时，用户无法滚动查看菜单底部:
https://jsfiddle.net/Imabot/ydmwLo2j/2/个
我已经用overflow: scroll;试过很多东西了.但这一切都不管用.
有没有办法解决这两个问题？
我已经读过这个问题了，但它没有帮助:How to make the height REALLY 100%