удерживайте модальное название сверху при прокрутке

Question

У меня есть модал, html:

 <div class="modal__container">
    <div class="modal__container-title">
      Title
      <div class="text-lg" @click="closeModal">&times;</div>
  </div>
  <div class="modal__container-content">
      <!-- content -->
  </div>
</div>

с css:

.modal__container {
width: 95%;
max-width: 780px;
max-height: 680px;
overflow-y: auto;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
.modal__container-title {
  color: #fff;
  background: #000;
  font-size: 16px;
  padding: 0 5px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.modal__container-content {
  padding: 15px;
  border: 5px solid #000;
  border-top: none;
}
}

Я пытаюсь переместить полосу прокрутки в модальное содержимое, чтобы Я могу держать модальное название сверху при прокрутке, но не могу найти способ сделать это. Я пытался переместить переполнение-у: авто; в .modal__container-content, но это не удалось. Пожалуйста, помогите, спасибо.

Пример здесь: https://codepen.io/uu9924079/pen/PoPoZNv?editors=1100

Answer 1

Один из способов сделать это состоит в добавлении следующего к .modal__container-title:

position: sticky;
top: 0;

Это не будет перемещать полосу прокрутки в контент, но только закрепит заголовок в верхней части прокручиваемого элемента. область.