CSS FLEXBOX при адаптиве нельзя пролистать страницу вверх

 <div class="page">
    <div class="page-overlay page-login">
      <div class="wrap-login">
        <p class="wrap-login__title">Войти в электорнную школу</p>
        <div class="form-auth">
          <form action="" class="form">
            <div class="form-item">
              <p for="" class="form-item__title">Логин</p>
              <p class="form-item__desc">Укажите логин, который вам выдали.</p>
              <input type="text" class="form-item__input">
            </div>
            <div class="form-item form-item--margin">
              <p for="" class="form-item__title">Пароль</p>
              <p class="form-item__desc">Укажите пароль</p>
              <input type="password" class="form-item__input">
            </div>
            <div class="form-item form-item--footer">
              <button class="form-btn">Войти</button>
              <div class="form-link">
                <a href="#" class="form-link__text">Забыли пароль?</a>
                <a href="#" class="form-link__text">Регистрация</a>
              </div>
            </div>
            <div class="form-item">
              <p class="form__desc">Нажимая на кнопку, вы даете согласие на обработку персональных данных</p>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>

CSS

.page-login {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

при адаптиве блок form виден только на половину никак не могу пролистать вверх до заголовка. Если убрать display: flex у .page-login, то я спокойно могу листать страницу сверху вниз