HTML/CSS content overlaps in div with flex

user_9851762 0
Viewed 72

I have the following HTML/CSS where I positioned a text and a headline centered in a div. However, if the height gets smaller, the text content exceeds the divs size and the headline is shown in the text.
Is there a way to fix this, e.g. make the div's height greater, or is there another best practice?

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>

flexbox css html
2 Answers

Why you're using absolutes? Isn't this what you want?

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

user_56743660

Replace this 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);
}
user_37511290
Related