Popup при масштабировании не позволяет прокрутить вверх - HTML, CSS

Question

Всем привет,может кто то подскажет как поправить мой код, ка как popup при масштабе 500% не умещается
в экране именно его верхняя часть, и + текст который есть в его контенте выходит снизу за пределы
самого popup'a. Буду рад за помощь!

function togglePopup() {
  document.getElementById("popup-1").classList.toggle("active");
}

.popup .overlay {
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100vw;
  height: 100vh;
  background: rgba(0,0,0,0.7);
  z-index: 1;
  display: none;
}

.popup .content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  background: #fff;
  width: 95%;
  max-width: 500px;
  height: 220px;
  z-index: 2;
  text-align: center;
  padding: 20px;
  box-sizing: border-box;
  font-family: "Open Sans" ,sans-serif;
}

.popup .close-btn {
  cursor: pointer;
  position: absolute;
  right: 20px;
  top: 20px;
  width: 30px;
  height: 30px;
  background: #222;
  color: #fff;
  font-size: 25px;
  font-weight: 600;
  line-height: 30px;
  text-align: center;
  border-radius: 50%;
}

.popup.active .overlay {
  display: block;
}

.popup.active .content {
  transition: all 300ms ease-in-out;
  transform: translate(-50%, -50%) scale(1);
}

button.btn {
  padding: 15px;
  font-size: 18px;
  border: 2px solid #222;
  color: #222;
  text-transform: uppercase;
  font-weight: 600;
  background: #fff;
}

<div class="popup" id="popup-1">
  <div class="overlay"></div>
  <div class="content">
    <div class="close-btn" onclick="togglePopup()">&times;</div>
    <h1>Title</h1>
    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Delectus eaque quo id, enim, mollitia sint repudiandae aut expedita eius animi quos similique nobis natus consequuntur veniam sed, labore cum. Aliquid!</p>
  </div>
</div>

<button onclick="togglePopup()" class="btn">Show Popup</button>

Answer 1

Вместо height: 100vh; используйте min-height: 100vh;.

БЛОГ НА HUSL

Popup при масштабировании не позволяет прокрутить вверх - HTML, CSS

Ответы (1 шт):