I have a section called Timeline that is overflowing into another section called Contact in my React website.

What can I do so that all the contents of Timeline show but also do not overflow into another section?

Edit: The lightblue portion is where the Contact section starts

Edit:

import React from 'react'
import './app.scss';
import Navbar from "./components/navbar/Navbar"
import Intro from "./components/intro/Intro"
import Menu from "./components/menu/Menu"
import Timeline from './components/timeline/Timeline';
import Contact from "./components/contact/Contact"
import { useState } from "react"
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;
        display: flex;
        scroll-snap-type: y mandatory;
        scrollbar-width: none; // for firefox
        &::-webkit-scrollbar{
            display: none;
        }

        > * {
            width: 100vw;
            height: calc(100vh - 70px);
            scroll-snap-align: start;
        }
    }
}