Два div внутри другого div перекрываются

Question

Я уже задавал похожий вопрос, но не нашел ответа. Сейчас я нахожусь в другом разделе моего веб-сайта, но здесь также есть проблема. Код super basi c, поэтому я надеюсь, что это поможет решить проблему.

Некоторый контекст: Моя главная страница разделена на 3 контейнера divs, каждый из которых имеет 100vh, поэтому они должны занимать весь экран, даже когда кто-то изменяет размер браузера. Второй div в приведенном ниже коде (.showcase) должен придерживаться нижней части контейнера div (поэтому я добавил position: absolute и bottom: 0).

Моя проблема в том, что два divs в контейнере div 1 продолжают перекрываться, например, когда я уменьшаю высоту браузера. Но я хочу, чтобы они 'pu sh' друг от друга отошли друг от друга, в основном не давая места для другого div перекрываться. Так что, когда я, например, добавлю заполнение к двум divs, это заполнение все равно будет отображаться на странице даже при изменении размера браузера. И независимо от того, что я добавил (display: block, Flexbox, даже помещая divs в table et c), все это не помогло, и содержимое этих двух divs продолжает перекрываться.

Может кто-нибудь помочь мне здесь? Я буквально не знаю, как go отсюда ...

Вот код:

.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

Посмотрите, работает ли это для вас. Используется flexbox на расстоянии два 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>

Answer 2

Я считаю, что это решит вашу проблему. Если я правильно понял, что вам нужно.

.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;
}

Вы можете смоделировать это в JSFiddle по этой ссылке