Two divs within another div overlap - html

Question

I asked a similar question already but haven't found an answer. I am now at a different section of my website but have the the issue here as well. The code is super basic, so I am hoping this will help to solve the issue.
Some context: My front page is sectioned in 3 container divs, each of them with 100vh, so they should take up the entire screen, even when someone resizes the browser. The second div in the code below (.showcase) should stick to the bottom of the Container div (that's why I added position: absolute and bottom: 0).
My issue is now that the two divs in the Container div 1, keep overlapping when I reduce the browser height for example. But I want them to 'push' each other away from each other, basically not giving space for the other div to overlap. So that when I, for example, would add a padding to the two divs, that the padding still shows on the page even if resizing the browser. And no matter what I added (display: block, Flexbox, even putting the divs into a table etc) all of this didn't help and the content of the two divs keeps overlapping.
Can anyone help me here? I literally don't know how to go from here...
Here is the code:
.Container1 {
overflow: hidden;
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: block;
}
.hp_slogan {
padding-top: 20%;
padding-bottom: 3%;
}
.showcase {
position: absolute;
bottom: 0;
display: block;
}
<div class="Container1">
<div class="hp_slogan">
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 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.
</div>
</div>

Answer 1

I believe this will solve your problem If I understood correctly what you need.
.Container1 {
overflow:hidden;
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: 20%;
margin-bottom:20px;
padding-bottom: 3%;
}
.showcase {
bottom: 0;
}
You can simulate it in JSFiddle with this link

Answer 2

See if this works for you. Used flexbox to distance two divs
.Container1 {
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
overflow: hidden;
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;
}
<div class="Container1">
<div class="hp_slogan">
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 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.
</div>
</div>