I’m trying to implement a feature where it snaps 100vh sections. The general outline looks like:

<main className={classes.main}>
 <Logo />
 <Hero/>
 <Section />
</main>

And the page.module.css:

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

Each component inside has this style:

.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;
}

It works as intended on Safari but on chrome and other browsers, I can’t scroll at all. It seems like the main class/parent component is making it unscrollable and I’ve tried everything but it just doesn’t work out. Any ideas how to make it work?