Safariでサイズ変更された画像を持つFlexbox

Question

次のレイアウトはChromeとFirefoxで動作しますが、Safariでは壊れています。

.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; 
 
}

<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>

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

壊れレイアウト：

Answer 1

は、他の迷惑なブラウザの矛盾のように見えます。

解決策は、画像容器からflex-shrink: 1を取り除いたように見えます。

の代わりにこの：クローム、FF、IE11とSafariでテスト

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

：

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

これを試してみてください。

Revised Pen