I'm creating a landing page with 3 sections (I haven't coded the 3rd section yet).

Each section must occupy 100% of the screen.

The top 2 sections have 2 columns each.

I'm using Flexbox for this, and everything looks great as long as the browser is full screen and the sections have no content. When I start adding content inside the sections, then resize the window, the sections start to overlap, especially when resizing only vertically.

When resizing horizontally there is no problem as I can change flex-direction:column; to flex-direction:row; for them to stack.

How can I get a 100% view of the section while making everything responsive when the window is resized and avoid overlapping?

Would CSS Grid be a better option here?

Here is a Code Pen. Slide the code panel up, then resize your window, and you'll notice how the second section overlaps the first section's button, text, and image. Code Pen: https://codepen.io/MarwanAK10/pen/eYedLoZ

If you try to remove the button, paragraph and image from the html, the problem will go away and when you resize the sections won't overlap...

Thanks!