DEV Community

Satyen Singh
Satyen Singh

Posted on

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
Image description

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>
  );
}
Enter fullscreen mode Exit fullscreen mode

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;
        }
    }
}
Enter fullscreen mode Exit fullscreen mode

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

Discussion (6)

Collapse
j471n profile image
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;
}

Enter fullscreen mode Exit fullscreen mode
Collapse
ssingh1997 profile image
Satyen Singh Author

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

Collapse
jamesthomson profile image
James Thomson

Hard to say without seeing any code...

Collapse
ssingh1997 profile image
Satyen Singh Author

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!

Collapse
jamesthomson profile image
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.

Thread Thread
ssingh1997 profile image
Satyen Singh Author

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