这是一个可能的浏览器怪癖与safari和列包裹flexbox的？

Question

比较我的flexbox在chrome或firefox中的外观以及它在safari中的外观。 Chrome＆amp; 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>

Answer 1

看起来这确实是特定于Safari的Bug。