Flexbox mit großen Bildern in Safari

Question

Ich habe das folgende Layout in Chrome und Firefox funktioniert, aber es ist in Safari gebrochen.

.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

Der zerbrochene Layout:

Answer 1

Sieht aus wie eine andere lästige Browser Inkonsistenz. Die Lösung scheint die Entfernung von flex-shrink: 1 aus dem Bildcontainer zu sein.

Statt dessen:

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

Getestet in Chrome, FF, IE11 und Safari.

Revised Pen