Setting container to 100vh is not working in my CSS layout


I have a layout that has 4 sections that each contain a main and an aside container. These two containers take up half of the width of the screen, and SHOULD take up the whole screen height. However vh will not work so I am unsure what to do from here. To be clear. I would Like everything else to stay the same. So the main content should scroll until the end is reached, at which point the whole section will scroll to the next.

Here is what I have so far, the height of the aside is now set to 685px.


Using 100vh on the section tag CSS works fine for me? Sets the height of the section to the height of the viewport as expected.


Indeed, same here. when I set the sections to 100vh, each section does become the height of the viewport so its working like its supposed to.

Wanting the screen to then stay put until done scrolling through each section is a different action not related to vh… not sure how to do something like that…