html - 具有 flex 子元素的 div 的 CSS 绝对像素高度

Question

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

谁能帮我把 .half-width 设为 795 像素的“固定”高度而不影响 child 的 flex 对齐方式？

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

当您在类(class)上添加 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>