<Scroll html> contents overlap each other when resizing vertically/the height

[czrest]

I have a total of 10 pages for my ScrollControls and I'm using tailwind for my css. I added 10 sections to my with each having w-screen and h-screen (vw: 100%). my problem is whenever I change the height of my browser/screen, the elements inside either will have too much gap in between or overlaps each other when too small. How do I fix the height of each page?