CSS：100% div 在移动设备上不显示为 100%

Question

很奇怪，但我有一个我正在处理的网站（https://envymedical.com/staging/），它使用高级自定义字段在移动设备和手机上并排显示带有两个div的弹性框，它们应该折叠并出现在彼此之上。

出于某种原因，在移动设备上，即使我为每个div设置了width: 100%，也不会发生这种情况。下面是一个示例：

.half_image_half_text {
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  min-height: 25vw;
}
body.home .half_image_half_text {
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  min-height: 40vw;
}
.half_image_half_text.reversed {
  flex-direction: row-reverse
}
.half_image_half_text .half-block {
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  width: 50%;
  align-items: center;
  justify-content: center
}
.half_image_half_text .text-block.watermark {
  background: url("../../images/envy-logo-bg.png") bottom left no-repeat;
  background-size: auto 100%;
}
@media (max-width: 759px) {
  .half_image_half_text {
    display: block;
    min-height: 60vw;
    height: 60vw;
  }
  .half_image_half_text .half-block {
    width: 100%;
  }
  .half_image_half_text .image-block {
    height: 60vw;
    max-height: 60vw;
  }
  body.home .half-block.image-block {
    width: 100%!important;
  }
  body.home .half-block.text-block.gray.invert {
    width: 100%!important;
  }
}

<section class="row half_image_half_text gray invert">
  <div class="half-block image-block" style="background-image:url('https://envymedical.com/staging/wp-content/uploads/2016/08/hero-envy-medical-products.jpg')"></div>
  <div class="half-block text-block gray invert">
    <div class="block-text gray invert">
      <h2>Transformative Skin Care for Transformative Results</h2>
      <p><a class="btn" href="/our-products/">Shop Now</a></p>
    </div>
  </div>
</section>

Answer 1

在此媒体中，您要将显示更改为阻止：

@media (max-width: 759px) {
    .half_image_half_text {
        display: block;
        min-height: 60vw;
        height: 60vw;
    }
}

它

不允许折叠两个div，因为现在它不是一个弹性框，所以如果你把它作为一个弹性框，那么使用flex-direction: column，它将解决问题：

@media (max-width: 759px) {
    .half_image_half_text {
       flex-direction: column;
       min-height: 60vw;
       height: 60vw;
   }
}