Vertical scroll-snap implementation not working

Question

I have a react app with some semantic-ui styling. I am trying to implement a scroll snap with sections of my site. I have tried adding scroll-snap-type: y mandatory; and scroll-snap-align: start; in the body and sections like this:

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", 
"Roboto", "Oxygen",
    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica 
Neue",
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-snap-type: y mandatory;
}

section {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 100%;
   height: 100vh;
  scroll-snap-align: start;
}

and i have also added those in the container and sections as well:

 .container {
  width: 100%;
  height: 100%;
  color: white;
  scroll-snap-type: y mandatory;
} 

 section {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      width: 100%;
       height: 100vh;
      scroll-snap-align: start;
    }

i have also tried implementing it the way brad traversy does in one of his videos. i added overflow: hidden; in the body and the container looked something like this

.container {
  width: 100%;
  height: 100%;
  color: white;
overflow-y: scroll;
scroll-behavior: smooth;
scroll-snap-type: y mandatory;
} 

section {
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          text-align: center;
          width: 100%;
           height: 100vh;
          scroll-snap-align: center;
    }

did not work either.

i am also using a container imported from semantic-ui in a react app, so Im not sure if that has anything to do with it, but when i try to implement this way, the scroll bar goes away as well.

Answer 1

Fixed the problem. I believe flexbox in the section was preventing me from using scroll snap