css - относительное и абсолютное позиционирование в сетке css - мне нужно увеличить вертикальную панель навигации до максимальной высоты, но с учетом ширины

Question

Я создаю это меню в сетке css. Все работает, как и ожидалось, кроме навигационной панели меню.

Я искал это последние 3 дня (!), Но не могу найти решение.

Я хочу навигационную панель быть 100% шириной в моей области сетки viewport__esquerda, а max-height = 90vh. Если высота больше 90vh, он должен активировать overflow-y.

, если я использую .menu {position :lative; } - Navbar предполагает, что я хочу 100% ширины, min-height: 250px; НО не расширяется до максимальной высоты (переполнение-y работает).

, если я использую .menu {position: absolute; } - навигационная панель имеет ширину 100%, переопределяет правый контент, учитывает минимальную высоту: 250px; НО не расширяется, пока max-height (overflow-y работает).

Если я вообще не использую позицию, панель навигации переходит на 100% ширины, переопределяя правильное содержимое, не уважая max-height и overflow-y.

Обратите внимание, что все остальное работает как положено, с размещением и как дочерние элементы, все в порядке. Мне просто нужно поменять класс .menu.

Надеюсь, мой вопрос понятен, можно помочь, пожалуйста?

Я сделал пробный тест (безобразно, я знаю). Пожалуйста, прокрутите до элемента d, нажмите на него, он должен увеличиться до 90vh, а затем активируйте overflow-y

var menu = document.getElementById("menu_ul");
var pais = menu.getElementsByClassName("pai");
for (var pai = 0; pai < pais.length; pai ++) {
    pais[pai].addEventListener("click", function(evento_pai) {
        evento_pai.stopPropagation();
        this.classList.toggle("activo");
        if(this.classList.contains("activo")) {
            var ul = this.querySelector("ul");
            var quantos_sub_items = ul.children.length;
            this.style.height = Number(((quantos_sub_items + 1) * 50) - 3) +"px";
            this.style.maxHeight = Number(((quantos_sub_items + 1) * 50) - 3) +"px";
        } else {
            this.style.height = "50px";
            this.style.maxHeight = "50px";
        }
    });
}

.viewport {
  display: grid;
  grid-template-columns: minmax(0, 20%) 80%;
  max-width: 100vw !important;
  overflow-x: hidden;
  width: 100vw !important;
}
.viewport__esquerda {
  background-color: gray;
  align-self: start;
  grid-area: 1 / 1;
}
.viewport__direita {
  align-self: start;
  grid-area: 1 / 2;
}
.menu {
  box-shadow: 0 5px 5px var(--cool_gray_7);
  max-height: 90vh;
  min-height: 150px;
  overflow-x: hidden;
  position: relative;
  transition: top 0.5s linear;
  width: 100%;
  z-index: 9999;
}
.menu ul {
  position: absolute;
  top: 0;
  width: 100%;
}
.menu li {
  position: relative;
  width: 100%;
}
.pai {
  background-color: orange;
  height: 50px;
  width: 100px;
}
.filho {
  background-color: purple;
  height: 50px;
  width: 100px;
}
.pai_e_filho {
  background-color: green;
  height: 50px;
  width: 100px;
}
.pai_e_filho, .filho {
  display: none;
}
.activo {
  background-color: red;
}
.activo ul {
  transform: translateY(50px);
}
.activo > ul > li {
  display: block;
}

<div class="viewport">
    <div class="viewport__esquerda">
        <div class="menu">
            <ul id="menu_ul">
                <li class="pai">a</li>
                <li class="pai">b</li>
                <li class="pai">c</li>
                <li class="pai">d
                    <ul>
                        <li class="filho">e</li>
                        <li class="filho">f</li>
                        <li class="pai_e_filho">g
                            <ul>
                                <li class="filho">h</li>
                                <li class="filho">i</li>
                            </ul>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
    <div class="viewport__direita">
        viewport__direita content
    </div>
</div>

Спасибо