My div sections are overlapping when changing browser's height

Question

I am extremely frustrated because I keep running into the same issue. So I apologize for having to ask this question again...

I want my website to have different sections and used divs for that. For some reason, when I reduce my browser's height, the sections will overlap. So for example, I set the middle section (div container 2) to a red background color and the first section (div container 1) to a different color, in this fist section I also have some placeholder text. When I then reduce the browser's height, the red background from section 2 will keep moving into my first section with the placeholder text. I removed all content from the second container but obviously this is an even bigger issue when I have elements in the second container because then not only the background but also the elements from this section will move into my first section and overlapping with the content from the first section.

When I asked this question yesterday, the issue was that I had position absolute but that's no longer the case. I tried all different positioning (flex, block, inline, inline block, absolute) but this overlapping when resizing the browser keeps happening :(

Can anyone please help me??

Here is my code:

 .Container1 { height: 100vh; width: 100%; margin: 0; background: rgb(74, 105, 113); background: linear-gradient(90deg, rgba(74, 105, 113, 1) 0%, rgba(129, 161, 170, 1) 60%, rgba(181, 207, 214, 1) 100%); text-align: center; display: flex; flex-direction: column; } .hp_slogan { padding-top: 100px; } .showcase { margin-top: auto; } /* Container2 Styling */ .container2 { height: 100vh; width: 100%; background-color: red; color: white; display: block; font-size: 16px; }

 <div class="Container1"> <div class="hp_slogan"> <div class=""> <?php echo do_shortcode('[smartslider3 slider=19]'); ?> </div> <p>Placeholder Text.</p> </div> <div class="showcase"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div> </div> <div class="container2"> </div>

Answer 1

From my own comment:

Try using min-height: 100vh instead of height: 100vh .