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

【问题标题】：CSS: 100% div's not appearing as 100% on mobileCSS：100% div 在移动设备上不显示为 100%
【发布时间】：2018-03-17 12:03:54
【问题描述】：

很奇怪，但我有一个正在开发的网站 (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>

【问题讨论】：

标签： html css flexbox css-float width

【解决方案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;
   }
}

【讨论】：