Починить главное выпадающее меню на мобильных устройствах

[TatianaFokina]

Описание проблемы

Никак не проскроллить меню со списком разделов Доки, когда оно полностью не умещается во вьюпорте. Когда пытаешься проскроллить его вниз, оно закрывается. В итоге видны только первые несколько пунктов из него.

Как воспроизвести

1. Зайти на любую страницу Доки с мобильного устройства и включить ротацию экрана. Например, на страницу раздела HTML.
2. Открыть меню и попытаться его проскроллить ниже, чтобы выбрать последний пункт в списке разделов.

Как должно быть

Дело в том, что у меню задано position: fixed. Так что выпадающее меню просто-напросто область, которая не скроллится сейчас ни при каких обстоятельствах.

Видео

video_2023-05-26_16-26-12.mp4

[TatianaFokina]

Один из вариантов решения — добавить скроллбар в меню, но это не самое идеальное решение. Тогда на десктопах будет два скроллбара.

.nav {
    max-height: calc(100% - 50px);
    overflow-y: auto;
}

Другой вариант решения — JavaScript. Например, как в этом примере.

[HellSquirrel]

Мне кажется надо просто добавить что-то типа

@media (orientation: landscape and max-width: ...) {
 .nav {
    // разделы в две колонки
   display: grid;
   grid-template-columns: 1fr 1fr;
  }
}

[TatianaFokina]

А ещё тут подумала, что можно же просто не делать меню fixed или sticky на мобилках. На экране всё равно мало места, а меню его почти полностью занимает в открытом состоянии. Почему бы не оставить его всегда наверху?