Закрыть попап по нажатию на оверлей

Есть условный попап https://jsfiddle.net/35khsean, который позиционируется по центру окна и закрывается по клику на оверлей. Я хочу сделать так, чтобы при уменьшении высоты браузера он скроллился, для этого указываю ему высоту 100% и overflow, но тогда попап снизу и сверху перекрывает собой оверлей и соответственно я не могу нажать на не него, чтобы закрыть окно. JS не прилагаю, добавил cursor:pointer, чтобы было понятнее. Как это можно решить?

.c-popup {
position: fixed;
overflow-x: auto;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
z-index: 6;
height: 100%;
min-height: 100%;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
z-index: 10;
display: flex;
}
.c-popup__wrapper {
color: #000;
}
.c-popup__container {
margin: auto;
position: relative;
background-color: #fff;
}
.c-popup__wrapper {
align-items: center;
overflow: hidden;
position: relative;
z-index: 1;
width: 500px;
height: 250px;
}
.overlay {
overflow: auto;
position: fixed;
background-color: #000;
width: 100%;
height: 100%;
top: 0;
left: 0;
cursor: pointer;
z-index: 9;
}

<div class="c-popup">
    <div class="c-popup__container">
        <div class="c-popup__wrapper">
            /* что-то внутри */
        </div>
    </div>
</div>