这可能是 safari 和列包装的 flexbox 的浏览器怪癖吗？答案

【问题标题】：Is this a possible browser quirk with safari and column wrapped flexbox's?这可能是 safari 和列包装的 flexbox 的浏览器怪癖吗？
【发布时间】：2016-11-19 00:03:42
【问题描述】：

比较我的 flexbox 在 chrome 或 firefox 中的外观以及在 safari 中的外观。 Chrome 和 Firefox 是正确的。

在 Safari 中，它的作用就像是根据最后一个 flex 项的底部位置计算 flex 框的最小高度，而在其他浏览器中，它似乎根据任何 flex 项计算 flex 框的最小高度超过最低限度。

任何人都可以找出我的代码是否错误或确认这是一个错误吗？

在整页中查看 sn-p 以查看。

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>

【问题讨论】：

标签： safari cross-browser flexbox

【解决方案1】：

看起来这确实是一个 Safari 特有的错误。

【讨论】：