Как добавить scroll на pop-up блок без полос прокрутки т.е. не используя overflow: scroll;. На данный момент pop-up блок не влазит полностью в область окна по высоте, а при скролле срабатывает сам документ. Содержимое обрезается - его не видно.
.popup {
display: flex;
flex-wrap: wrap;
top: -100%;
right: 0;
left: 50%;
font-size: 14px;
z-index: 20;
margin: 0;
width: 85%;
min-width: 320px;
max-width: 40vw;
position: fixed;
padding: 15px;
border: 1px solid #383838;
background: #fefefe;
border-radius: 4px;
font: 14px/18px 'Tahoma', Arial, sans-serif;
box-shadow: 0 15px 20px rgba(0, 0, 0, .22), 0 19px 60px rgba(0, 0, 0, .3);
transform: translate(-50%, -500%);
transition: transform 0.6s ease-out;
}
.overlay {
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 10;
display: none;
background-color: rgba(0, 0, 0, 0.65);
position: fixed;
cursor: default;
}
.overlay:target {
display: block;
}
.overlay:target+.popup {
transform: translate(-50%, 0);
top: 20%;
}
.close {
top: -10px;
right: -10px;
width: 20px;
height: 20px;
position: absolute;
padding: 0;
border: 2px solid #ccc;
border-radius: 15px;
background-color: rgba(61, 61, 61, 0.8);
box-shadow: 0px 0px 10px #000;
text-align: center;
text-decoration: none;
font: 13px/20px 'Tahoma', Arial, sans-serif;
font-weight: bold;
transition: all ease .8s;
}
.close:before {
color: rgba(255, 255, 255, 0.9);
content: "X";
text-shadow: 0 -1px rgba(0, 0, 0, 0.9);
font-size: 12px;
}
.close:hover {
background-color: rgba(252, 20, 0, 0.8);
transform: rotate(360deg);
}
.popup embed,
.popup iframe {
top: 0;
right: 0;
bottom: 0;
left: 0;
display: block;
margin: auto;
min-width: 320px;
max-width: 600px;
width: 100%;
}
<body>
<header></header>
<main></main>
<footer></footer>
<a href="#x" class="overlay" id="win1"></a>
<div class="popup">
<div class="wrapper-p1-block">
<div class="pop-img">
<img src="/images/team/52.png" alt="Ivan Ivanych">
</div>
<div class="pop-txt">
<p>Ivan Ivanych<br>
<span>Founder</span></p>
</div>
</div>
<div class="wrapper-p2-block">
<div class="pop-txt-1">
<h3>some text</h3>
<p>some text</p>
</div>
<div class="pop-txt-2">
<p>some text</p>
</div>
<a class="close" title="Закрыть" href="#close"></a>
</div>
</div>
</body>