html - CSS:100% div 在移动设备上未显示为 100%

Question

很奇怪，但我有一个正在开发的网站 ( https://envymedical.com/staging/ )，它使用高级自定义字段显示一个带有两个 div 的 flexbox ，并排显示在移动设备和手机上，它们应该折叠并出现在一个接一个。

出于某种原因，在移动设备上，即使我为每个 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，因为现在它不是 flexbox ，所以如果你将它保留为 flexbox 然后使用 flex-direction: column 它将解决问题:

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