0
非常に奇妙ですが、私は（https://envymedical.com/staging/）で作業しているサイトを持っており、モバイル上で2つのdivを持つflexboxを表示するには、電話では、彼らは崩壊し、互いの上に現れます。CSS：100％divがモバイルで100％と表示されない
モバイルでは、各部門に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>