带flex子元素的div的CSS绝对像素高度

Question

我正在尝试使两个half-width div的高度为795px。但是，在更改此类的规则时，这不起作用。

有人可以帮助我将.half-width设置为795像素的“固定”高度而不会干扰孩子的弯曲对齐方式吗？

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>