HTML / CSS контент перекрывается в div с flex

Question

У меня есть следующий HTML / CSS, где я разместил текст и заголовок по центру div.Однако, если высота становится меньше, текстовое содержимое превышает размер divs и заголовок отображается в тексте.
Есть ли способ исправить это, например, увеличить высоту div или есть другойлучшая практика?

body {
  margin:0;
}
.container {
  display:flex;
  flex-wrap:wrap;     
  height:100vh;
  background-color: white;
}
.container > div {
  min-height: 100vh;
  border: 1px solid black;
  box-sizing:border-box;
  background-color: inherit;
}
.container > div .content{
  height: 100vh;
  width: 100vw;
  background-color: inherit;
}
.half-width {
  width:50%;
}
.half-width > .half-width-content{
  position: relative;
  margin-top: 0;
  height: 100%;
  width: 100%;
}
.half-width > .half-width-content > .instagram-slideshow{
  position: relative;
  height: 100%;
  width: 100%;
}
.half-width > .half-width-content > .instagram-slideshow > img{
  position: absolute;
  width: 60%;
  height: 60%;
  left: 50%;
  top:50%;
  visibility: visible;
  text-align: center;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.half-width > .half-width-content > .half-width-text {
  position: absolute;
  left: 50%;
  top: 50%;
  visibility: visible;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
.half-width > .half-width-content > h1{
  position: relative;
  top: 15%;
  text-align: center;
}

<div class="container">  
<div class="half-width" id="section2">
    <div class="half-width-content">
              <h1>Headline</h1>
      <div class="half-width-text">

        <div class="text-content">
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod</p>
          <p>
           tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
          </p>
        </div>
      </div>
    </div>
  </div>
  <div class="half-width">
    <div class="half-width-content">
      <div class="instagram-slideshow" id="1">
        <img class="slide" src="http://placekitten.com/200/300">
      </div>
    </div>
  </div>
</div>

Answer 1

Почему вы используете абсолюты?Разве это не то, что вы хотите?

.container {
  display: flex;
  align-items: stretch;
  justify-content: center;
  min-height: 100vh;
}

.item {
  flex: 0 0 50%;
  border: 1px solid #ccc;
  padding: 20px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
}

h2 {
  text-align: center;
}

<div class="container">
  <div class="item">
    <div>
      <h2>Headline</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex vel quos at suscipit, asperiores nemo possimus magnam eligendi ipsam odit qui cumque, nesciunt. Nesciunt debitis aliquam perferendis eos officia in. Esse ex, sint, atque earum possimus accusantium
      repellendus error commodi. Officia accusamus, magnam ab molestiae doloribus hic non! Sed molestiae atque, quaerat. Magnam deleniti impedit accusantium in rem, recusandae tenetur! Facilis cupiditate doloribus saepe deserunt fugiat aspernatur officia
      rerum id est tenetur suscipit ratione eaque, necessitatibus, exercitationem quos repellendus quasi a mollitia provident accusantium repellat optio ipsa. Nulla, dolorum, fugit. Perferendis facere, voluptatem praesentium ipsum nulla qui molestiae
      nostrum ex blanditiis error adipisci autem aspernatur quae, optio minus itaque. Doloremque magnam, laboriosam! Consequatur odio, neque voluptates laudantium ratione aliquam ullam. Nobis cumque enim, reiciendis, optio, at repellat quis nesciunt fugiat
      numquam neque quae voluptas excepturi, repellendus in earum. Nobis corporis porro, placeat id doloribus voluptates esse eaque possimus quibusdam repellat. Perferendis natus tenetur recusandae illo, ea laboriosam similique culpa nulla, ducim</p>
    </div>
  </div>
  <div class="item">
    <img class="slide" src="http://placekitten.com/200/300">
  </div>
</div>

Answer 2

Заменить эту CSS

.half-width>.half-width-content>.half-width-text {
    position: absolute;
    left: 50%;
    top: 50%;
    visibility: visible;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    margin-top: calc(15% + 70px);
}