0
比較我的flexbox在chrome或firefox中的外觀以及它在safari中的外觀。 Chrome & Firefox是正確的。這是一個可能的瀏覽器與safari和列包flexbox的怪癖嗎？
在Safari中，它的行爲就像Flex盒子的最小高度是基於最後一個Flex項目的底部位置計算的，而在其他瀏覽器中，它似乎基於任何Flex項目來計算Flex盒子的最小高度這超過了最低限度。
任何人都可以知道我的代碼是錯誤的還是確認這是一個錯誤？
查看完整頁面的代碼片段以查看。
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>