Обрезается модальное окно при нехватке места

Question

Попытаюсь объяснить, что я имею ввиду.
У нас есть блок .modal, он служит затемнением фона, внутри данного блока находится блок .modal__content, в котором может находится что угодно, любой высоты. Нужно чтобы блок .modal имел полосу прокрутки, если .modal__content не вмещается в видимую область. Но происходит то, что .modal__content выходит за верхнюю границу браузера и не видно, что там находится.

Правильно поведение, но блок .modal__content не центрируется по вертикали.

body
{
  margin: 0;
  color: #ACACAC;
}

.modal {
  box-sizing: border-box;
  z-index: 9999;
  display: none;
  position: fixed;
  overflow-y: auto;
  top: 0;
  bottom: 0;
  width: 100%;
  padding: 20px;
  background-color: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(2px);
  align-items: center;
  flex-direction: column;
}

.modal--open
{
  display: flex;
}

.modal__content
{
  max-width: 800px;
  width: 100%;
  border: 1px solid red;
}

.modal__header
{
  height: 50px;
  background-color: #484848;
}

.modal__body
{
  min-height: 200px;
  background-color: #252525;
}

<div class="modal modal--open">
  <div class="modal__content">
    <div class="modal__header">Заголовок</div>
    <div class="modal__body">Контент</div>
  </div>
</div>

Не правильное поведение, блок центрируется по центру, но обрезается сверху, если не влазит по высоте.

body
{
  margin: 0;
  color: #ACACAC;
}

.modal {
  box-sizing: border-box;
  z-index: 9999;
  display: none;
  position: fixed;
  overflow-y: auto;
  top: 0;
  bottom: 0;
  width: 100%;
  padding: 20px;
  background-color: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(2px);
  align-items: center;
  justify-content: center; /* Так мы центрируем */
  flex-direction: column;
}

.modal--open
{
  display: flex;
}

.modal__content
{
  max-width: 800px;
  width: 100%;
  border: 1px solid red;
}

.modal__header
{
  height: 50px;
  background-color: #484848;
}

.modal__body
{
  min-height: 200px;
  background-color: #252525;
}

<div class="modal modal--open">
  <div class="modal__content">
    <div class="modal__header">Заголовок</div>
    <div class="modal__body">Контент</div>
  </div>
</div>

Видео работы реальной модалки: Видео на YouTube

В начале видео, как должна работать модалка (Если не использовать justify-content: center для центрирования по вертикали), во второй части - как работает с данным свойством (то есть , обрезается верх).

Answer 1

Просто уберите отступы в пикселах

.modal {
  z-index: 9999;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  overflow-y: auto;
  width: 100vw;
  min-height: 100vh;
  background-color: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(2px);
}

.modal__content
{
  width: 60%;
  border: 1px solid red;
}

.modal__header
{
  height: 50px;
  width: 100%;
  background-color: #484848;
}

.modal__body
{
  width: 100%;
  min-height: 200px;
  background-color: #252525;
}

<div class="modal">
  <div class="modal__content">
    <div class="modal__header">       </div>
    <div class="modal__body">         </div>
  </div>
</div>

БЛОГ НА HUSL

Обрезается модальное окно при нехватке места

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