Hello, I am new to React but I am trying to learn it in order to create a personal website. I am creating a “Timeline” section on my website followed by a “Contact” one. How can I prevent the Timeline section's contents from overflowing into the next section but also show all the contents of the Timeline section? . This is what it currently looks like: The blue portion is where the contact section starts
Edit: App.jsx
function App() { const [menuOpen, setMenuOpen] = useState(false) return ( <div className="app"> <Navbar menuOpen={menuOpen} setMenuOpen={setMenuOpen}/> <Menu menuOpen={menuOpen} setMenuOpen={setMenuOpen}/> <div className="sections"> <Intro/> <Timeline/> <Contact/> </div> </div> ); } app.scss
.app { height: 100vh; .sections { width: 100%; height: calc(100vh - 70px); // background-color: #1F1D36; position: relative; top: 70px; scroll-behavior: smooth; scroll-snap-type: y mandatory; scrollbar-width: none; // for firefox &::-webkit-scrollbar{ display: none; } > * { width: 100vw; height: calc(100vh - 70px); scroll-snap-align: start; } } } EDIT: I have created a new post with the entire sandbox linked to it