Блок уплывает за экран при центрировании через flexbox css

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

Блок внутри wrapper

.forms {
      font-family: GTEestiProText, sans-serif;
      width: 100%;
      max-width: 500px;
      min-height: 520px;
      padding: 20px 30px;
      background-color: rgba(21, 22, 24, 0.5);
      backdrop-filter: blur(10px);
      border-radius: 10px;
      box-shadow: 0 0 15px 1px rgba(0, 0, 0, .2);
      display: flex;
      flex-direction: column;
      justify-content: center;
      transition: all .3s;
}

Блок внутри wrapper центрируется по горизонтали и вертикали, у этого блока фиксированная ширина, но на смартфоне когда я открываю клавиатуру или переворачиваю смартфон, так чтобы высота блока была больше чем окно браузера, то часть блока уезжает вверх за экран. Нашёл решение, но не хочу использовать его т.к. там нужны точные размеры блока

@media screen and (max-height: 520px){
    .wrapper{
        align-items: flex-start
    }
}

Как это исправить?