在Safari中打破大小图像的Flexbox

Question

我在Chrome和Firefox中使用了以下布局，但在Safari中已经破解了。

＆＃13;

＆＃13;

.grid {
  max-width: 1280px;
  margin: 0 auto;
  background-color: red;
}
.block {
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-flex-wrap: nowrap;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -webkit-justify-content: flex-start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  -webkit-align-content: flex-start;
  -ms-flex-line-pack: start;
  align-content: flex-start;
  -webkit-align-items: flex-start;
  -ms-flex-align: start;
  align-items: flex-start;
}
.block .meta {
  background-color: blue;
  margin: 0 60px 0 0;
  -webkit-order: 0;
  -ms-flex-order: 0;
  order: 0;
  -webkit-flex: 1 1 auto;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  -webkit-align-self: auto;
  -ms-flex-item-align: auto;
  align-self: auto;
}
.block .thumbnail {
  -webkit-order: 0;
  -ms-flex-order: 0;
  order: 0;
  -webkit-flex: 0 1 auto;
  -ms-flex: 0 1 auto;
  flex: 0 1 auto;
  -webkit-align-self: auto;
  -ms-flex-item-align: auto;
  align-self: auto;
}
.block img {
  width: 100%;
  height: auto;
  display: block;
}
.block:nth-child(even) .meta {
  margin: 0 0 0 60px;
  -webkit-order: 2;
  -ms-flex-order: 2;
  order: 2;
}
.block:nth-child(even) .thumbnail {
  -webkit-order: 1;
  -ms-flex-order: 1;
  order: 1;
}

＆＃13;

<div class="grid">
  <div class="block">
    <div class="meta">
      IPhone umami salvia polaroid asymmetrical. Kogi master cleanse 90's beard put a bird on it williamsburg. Trust fund biodiesel intelligentsia, wolf keytar actually polaroid. Kombucha XOXO artisan, echo park
    </div>
    <div class="thumbnail">
      <img style="width: 800px;" src="http://funkhaus.us/wp-content/uploads/Toys.jpg">
    </div>
  </div>
  <div class="block">
    <div class="meta">
      IPhone umami salvia polaroid asymmetrical. Kogi master cleanse 90's beard put a bird on it williamsburg. Trust fund biodiesel intelligentsia, wolf keytar actually polaroid. Kombucha XOXO artisan, echo park
    </div>
    <div class="thumbnail">
      <img style="width: 800px;" src="http://funkhaus.us/wp-content/uploads/Toys.jpg">
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

http://codepen.io/drewbaker/pen/zBqjNy?editors=1100

破碎的布局：

Answer 1

看起来像另一个恼人的浏览器不一致。

解决方案似乎是从图像容器中删除了flex-shrink: 1。

而不是：

.block .thumbnail {
   -webkit-flex: 0 1 auto;
   -ms-flex: 0 1 auto;
   flex: 0 1 auto;
}

试试这个：

.block .thumbnail {
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
   flex: 0 0 auto;
}

在Chrome，FF，IE11和Safari中测试过。

Revised Pen