CSS：100％div在移动设备上不显示为100％
问题描述：
非常奇怪，但我有一个正在处理的网站（https://envymedical.com/staging/），它使用高级自定义字段在移动设备上显示两个div并排显示Flexbox并在电话中，他们应该崩溃并出现在另一个之上。CSS：100％div在移动设备上不显示为100％
出于某种原因，在移动设备上，即使我为每个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>
答
在这个媒体你改变显示阻止：
@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;
}
}