Горизонтальная прокрутка вызывает вертикальную прокрутку только на мобильных устройствах ⇐ Html

[Anonymous]

Мне нужна боковая панель, которая при раскрытии появляется слева и смещает область содержимого вправо, чтобы она выходила за пределы области просмотра справа.
На мобильных устройствах, если есть горизонтальная прокрутка, есть и вертикальная прокрутка. Вертикальная прокрутка увеличивается пропорционально горизонтальной прокрутке. Область просмотра выходит за нижний конец элемента , и боковая панель внезапно заканчивается. Я не хочу, чтобы область прокрутки выходила за пределы документа.
Это происходит как в инструментах разработки Firefox и Chrome, так и на реальных мобильных устройствах. Так что это должно быть преднамеренное поведение, но я не могу найти никакой информации о том, почему это происходит, не говоря уже о том, как его преодолеть.
Я создал CodePen с минимально воспроизводимым примером. Примечание. Вам необходимо открыть инструменты разработки и включить эмулятор устройства или просмотреть его на мобильном устройстве.



body {
display: flex;
align-items: stretch;
margin: 0;
}

main {
width: 100%;
flex-shrink: 0;
}

nav {
min-height: 100dvh;
flex-shrink: 0;
background-color: purple;
width: 20rem;
}







Подробнее здесь: https://stackoverflow.com/questions/797 ... obile-only