Prevent overflow but show all contents of section

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

https://dev.to/ssingh1997/how-to-prevent-an-icon-from-being-cut-off-5781

Comments

[Jatin Sharma]

Well its hard to say but may be try to change the normal height to min-height because you are setting the harcoded height.

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

[Satyen Singh]

thanks Jatin! This actually worked but then my snap scroll stops working

[James Thomson]

Hard to say without seeing any code...

[Satyen Singh]

Hi James, I apologize, I thought I had posted my code but it seems like I had not. I have edited my answer to include my App.jsx and my app.scss file. Please let me know what else I can provide, thanks!

[James Thomson]

Don't use a set height on your .sections (and every child within it > * for that matter). Doing this restricts the browser from naturally calculating the height in needs for the content (your Timline) to fill the container.

[Satyen Singh]

Is there a way I can change for each one? I tried doing the nth child but that had no effect