Модальный элемент не будет прокручиваться вниз при столкновении с верхней частью экрана

Question

Итак, у меня есть модальный элемент, который при заполнении пользователем сгенерированных данных становится большим, вертикально, чтобы поместиться на экране. Я могу прокрутить вниз, чтобы просмотреть содержимое без проблем после установки «overflow-y: auto», но если я изменю размер окна по вертикали, и модал отодвинется от верхней части экрана, я не могу прокрутить его обратно вниз, чтобы вершина этого видна. Кажется, что это должно быть легко исправить, но для меня это решение ускользнуло от меня.

вот код из файла SASS моих приложений:

.modal {
  display: flex;
  justify-content: center;
  align-items: center;
  overflow-y: auto;
  background-color: rgba($black, 0.9);
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  padding-top: 10%;

  &-container {
    margin-top: 10%;
    position: relative;
    width: 40%;
    background-color: $light-color;
    color: $white;
  }

  &-content {
    padding: 5rem;
  }

  &-p-heading {
    margin-bottom: 0.5rem;
  }

  &-paragraph {
    margin-bottom: 2rem;
  }

  &-image-gallery {
    width: 100%;
    display: flex;
    justify-content: left;
    flex-wrap: wrap;
  }

  &-image {
    height: 7rem;
    width: 10rem;
    margin: 1rem;
    transition: all .25s;

    &-large {
      width: 90%;
      height: 60%;
    }

    &:hover {
      transform: scale(1.25);
      z-index: 1000;
    }
  }

  &-btn {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    transition: all 0.25s;

    &:hover {
      transform: scale(1.5);
      opacity: 1;
    }
  }
}

и вот ссылка на созданный мною кодовый блок, повторяющий поведение:

https://codepen.io/jonas-matlock/pen/abOVYwd

еще раз, чтобы увидеть проблему, которую я пытаюсь решить, сожмите окно вертикально снизу вверх, чтобы убрать верхнюю часть модального поля зрения ...

Answer 1

Это вызвано применением значения center к свойству align-items. В соответствии с CSS модулем гибкой компоновки ящиков уровня 1:

center ^ref

Поле поля для гибкого элемента расположено по центру поперечная ось в пределах линии. (Если размер пересечения гибкой линии меньше, чем у гибкого элемента, он будет одинаково переполнен в обоих направлениях .)

Следовательно, вы можете использовать safe значение вместо:

safe ^ref

Если размер объекта выравнивания выходит за пределы контейнера выравнивания, субъект выравнивания вместо выравнивания, как если бы режим выравнивания был запущен.

.modal {
  display: flex;
  justify-content: center;
  align-items: safe center; /* ADD safe keyword */
  overflow-y: auto;
  background-color: black;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
}

.modal-container {
  position: relative;
  display: flex;
  justify-content: center;
  width: 40%;
  background-color: white;
  color: black;
}

<div class="modal">
  <div class="modal-container">
    <div class="modal-content">
      <h1>I am modal</h1>
      <p>I am modal content</p>
      <p>I am modal content</p>
      <p>I am modal content</p>
      <p>I am modal content</p>
      <p>I am modal content</p>
      <p>I am modal content</p>
    </div>
  </div>
</div>

или используйте авто-поле вместо свойства justify-content, align-items.

.modal {
  display: flex;
  overflow-y: auto;
  background-color: black;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
}

.modal-container {
  position: relative;
  display: flex;
  justify-content: center;
  width: 40%;
  background-color: white;
  color: black;
  margin: auto; /* ADD */
}

<div class="modal">
  <div class="modal-container">
    <div class="modal-content">
      <h1>I am modal</h1>
      <p>I am modal content</p>
      <p>I am modal content</p>
      <p>I am modal content</p>
      <p>I am modal content</p>
      <p>I am modal content</p>
      <p>I am modal content</p>
    </div>
  </div>
</div>

Обратите внимание, что только Firefox в настоящее время поддерживает ключевое слово safe ( caniuse ).

Answer 2

Все, что я сделал, это изменил margin-top: 10% на margin: auto