html - Flexbox with sized images broken in Safari -

i have following layout working in chrome , firefox, it's broken in 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 bird on williamsburg. trust fund biodiesel intelligentsia, wolf keytar 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 bird on williamsburg. trust fund biodiesel intelligentsia, wolf keytar 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

the broken layout:

looks annoying browser inconsistency.

the solution appears removal of flex-shrink: 1 image container.

instead of this:

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

try this:

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

tested in chrome, ff, ie11 , safari.

revised pen