Основной контейнер, для которого установлено значение 100vh, становится недоступным для прокрутки. ⇐ CSS

[Anonymous]

Я пытаюсь реализовать функцию, позволяющую фиксировать 100vh разделов. Общая схема выглядит так:

Код: Выделить всё

И page.module.css:

Код: Выделить всё

.main {
height: 100vh;
overflow: auto;
scroll-snap-type: y mandatory;
}

Каждый компонент внутри имеет этот стиль:

Код: Выделить всё

.section {
height: 100vh;
width: 100%;
display: flex;
align-items: center;
scroll-snap-align: start;
scroll-snap-type: y mandatory;
scroll-snap-stop: always;
overflow-y: scroll;
}

В Safari он работает как задумано, но в Chrome и других браузерах я вообще не могу прокручивать. Кажется, что основной класс/родительский компонент делает его непрокручиваемым, и я пробовал все, но это просто не сработало. Есть идеи, как заставить это работать?

Подробнее здесь: https://stackoverflow.com/questions/786 ... scrollable