CSS абсолютная высота пикселя для div с гибкими дочерними элементами

Question

Я пытаюсь дать двум half-width делениям высоту 795 пикселей.Однако, это не работает при изменении правила для этого класса.

Может ли кто-нибудь помочь мне сделать .half-width «фиксированной» высотой 795 пикселей, не нарушая гибкое выравнивание childs?

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;
}
.half-width {
  width:50%;
}

.container > div .content{
  height: 100vh;
  width: 100vw;
  background-color: inherit;
}

.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%;
  margin: auto;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  /*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%);*/
  padding-left: 50px;
    padding-right: 50px;
}
.half-width > .half-width-content > h1{
  position: relative;
  text-align: center;
  /*top: 15%;*/
}
.half-width#section2 > .half-width-content, .half-width#section3 > .half-width-content {
    display: flex;
  flex-direction: column;
  justify-content: 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 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="https://placeimg.com/640/480/animals">
      </div>
    </div>
  </div>
  </div>

изображение:

Answer 1

Когда вы добавляете height в ваш класс, тогда он правильно отображает высоту.Смотрите пример.

Или я что-то упустил в вашем вопросе?Если да, уточните.

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

.half-width {
  width: 50%;
  height: 795px;
}

.container>div .content {
  height: 100vh;
  width: 100vw;
  background-color: inherit;
}

.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: auto;
  margin: auto;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  /*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%);*/
  padding-left: 50px;
  padding-right: 50px;
}

.half-width>.half-width-content>h1 {
  position: relative;
  text-align: center;
  /*top: 15%;*/
}

.half-width#section2>.half-width-content,
.half-width#section3>.half-width-content {
  display: flex;
  flex-direction: column;
  justify-content: 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 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="https://placeimg.com/640/480/animals">
      </div>
    </div>
  </div>
</div>