Как сделать, чтобы скроллилось только модальное окно?

Есть модальное окно:

.modal {     display: flex;     flex-direction: column;     position: fixed;     top: 0;     left: 0;     width: 100vw;     min-height: 100vh;     z-index: 2;     opacity: 0;     visibility: hidden; }  .modal.active {     opacity: 1;     visibility: visible; }

При его открытии, на body вешается класс lock

body.lock {     overflow-y: hidden; }

Скролл у body убирается, но нет скролла и у модального окна, хотя его границы выходят за пределы экрана. Можно ли как-то исправить?

Дополнительно:

а чем вариант с установкой overflow: auto для .modal и заменой min-height на обычный height там же не устроил?

Ответы:

<div class="modal">   <div class="modal-content">     <!-- Содержимое модального окна -->   </div> </div>

• body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  }

  .modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* Полупрозрачный фон для модального окна */
  z-index: 2;
  overflow-y: hidden; /* Запретить скроллирование body */
  }

  .modal::before {
  content: "";
  height: 100%;
  width: 100%;
  position: fixed;
  }

  .modal-content {
  background-color: #fff;
  margin: 10% auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
  max-width: 400px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  }

  /* Отобразить модальное окно, когда у него есть класс "active" */
  .modal.active {
  display: block;
  }