0
私のflexboxがchromeやfirefoxでどのように見えるか、Safariでどのように見えるかを比較してください。 Chrome & Firefoxが正しいです。これはサファリとコラムでラップされたフレックスボックスを使用したブラウザの可能性ですか？
Safariでは、フレックスボックスの最小高さが最後のフレックスアイテムの下部位置に基づいて計算されますが、他のブラウザでは、フレックスアイテムに基づいてフレックスボックスの最小高さが計算されるようですこれは最小値を超えています。
私のコードが間違っているかどうかを知ることができますか、これがバグであることを確認できますか？
スニペットを全面的に表示するには、ご覧ください。
html {
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
.wrapper {
margin: 0 auto;
max-width: 984px;
}
.container {
margin: 0 80px;
padding: 30px 0;
}
h1 {
margin: 0;
}
.top {
position: relative;
display: flex;
flex-direction: column;
max-height: 800px;
flex-wrap: wrap;
}
.prod-header {
order: 3;
width: 49%;
padding-left: 30px;
}
.prod-header img {
width: 100%;
}
.my-slider {
order: 1;
width: 51%;
padding-right: 30px;
}
.my-slider img {
width: 100%;
}
.prod-info {
order: 4;
width: 49%;
padding-left: 30px;
}
.prod-video {
order: 2;
width: 51%;
padding-right: 30px;
}
.prod-video iframe {
width: 100%;
}
.prod-review {
position: absolute;
bottom: 0;
right: 0;
order: 5;
padding-left: 30px;
width: 49%;
}
.prod-review img {
width: 100%;
}<div class="wrapper">
<div class="container">
<div class="top flex">
<header class="prod-header">
<h1><img src="http://placehold.it/608x300"></h1>
<p>Family trivia game</p>
</header>
<div class="my-slider">
<img src="http://placehold.it/608x675">
</div>
<div class="prod-info">
<p>Lorem ipsum Occaecat qui proident aute id voluptate velit nulla anim incididunt.</p>
<p>Lorem ipsum Velit sint dolore dolor irure ullamco eu. Lorem ipsum Aute irure velit ad in sunt Duis sint veniam minim in labore voluptate. Lorem ipsum Laborum dolore eiusmod Ut deserunt occaecat aliquip amet do esse quis tempor et.</p>
</div>
<div class="prod-video">
<div class="videoWrapper">
<iframe width="420" height="315" src="https://www.youtube.com/embed/KqtvA6xo4DE" frameborder="0" allowfullscreen></iframe>
</div>
</div>
<div class="prod-review">
<img src="http://placehold.it/608x375">
<a class="button" href="#">Buy now</a>
</div>
</div>
</div>
</div>