Как исправить эту проблему перехода css из-за медиа-запросов?

Question

Вот мой s css

&-additional {
        display: hidden;
        max-height: 0px;
        display: flex;
        justify-content: center;
        border-top: 2px inset transparent;
        // transition: all 0.3s;
    &_active {
          transition: all 0.3s;
          padding: 15px 0;
          border-top: 2px solid rgb(70, 0, 0);
          max-height: 70px;
    }
@media screen and (max-width: 991px) {
        border: none;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        position: absolute;
        top: 0;
        right: -300px;
        width: 250px;
        transition: right 0.4s;
        background: #551514;
        max-height: 100vh;
        height: 100vh;
        padding: 15px 0;
}}

Вот что происходит на 990px:

Когда ширина идет дальше, высота колеблется от От 0px до 70px, а затем обратно до 0px, формируя эту дополнительную высоту, а затем медленно переходит к 0px:

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