Flexbox in Safari funktioniert nicht wie erwartet

Question

Ich habe ein Produkt Grid-Layout mit flexbox. Ich möchte, dass mindestens zwei Produkte hintereinander angezeigt werden, egal wie klein der Bildschirm ist. Ich habe den folgenden Code, der in Chrome funktioniert:

HTML

<div class="container"> 
    <div class="product"> 
    <a href="javascript:void();"> 
    <img src="https://unsplash.it/300/300" alt="" /> 
    <p class="title">Product Title that is longer than others</p> 
    </a> 
    <p class="price">£100.00</p> 
    <input class="small" value="Add to cart" type="submit"> 
    </div> 
    <div class="product"> 
    <a href="javascript:void();"> 
    <img src="https://unsplash.it/300/300" alt="" /> 
    <p class="title">Product Title</p> 
    </a> 
    <p class="price">£100.00</p> 
    <input class="small" value="Add to cart" type="submit"> 
    </div> 
    <div class="product"> 
    <a href="javascript:void();"> 
    <img src="https://unsplash.it/300/300" alt="" /> 
    <p class="title">Product Title</p> 
    </a> 
    <p class="price">£100.00</p> 
    <input class="small" value="Add to cart" type="submit"> 
    </div> 
    <div class="product"> 
    <a href="javascript:void();"> 
    <img src="https://unsplash.it/300/300" alt="" /> 
    <p class="title">Product Title</p> 
    </a> 
    <p class="price">£100.00</p> 
    <input class="small" value="Add to cart" type="submit"> 
    </div> 
    <div class="product"> 
    <a href="javascript:void();"> 
    <img src="https://unsplash.it/300/300" alt="" /> 
    <p class="title">Product Title</p> 
    </a> 
    <p class="price">£100.00</p> 
    <input class="small" value="Add to cart" type="submit"> 
    </div> 
    <div class="product"> 
    <a href="javascript:void();"> 
    <img src="https://unsplash.it/300/300" alt="" /> 
    <p class="title">Product Title</p> 
    </a> 
    <p class="price">£100.00</p> 
    <input class="small" value="Add to cart" type="submit"> 
    </div> 
    <div class="product"> 
    <a href="javascript:void();"> 
    <img src="https://unsplash.it/300/300" alt="" /> 
    <p class="title">Product Title</p> 
    </a> 
    <p class="price">£100.00</p> 
    <input class="small" value="Add to cart" type="submit"> 
    </div> 
    <div class="product"> 
    <a href="javascript:void();"> 
    <img src="https://unsplash.it/300/300" alt="" /> 
    <p class="title">Product Title</p> 
    </a> 
    <p class="price">£100.00</p> 
    <input class="small" value="Add to cart" type="submit"> 
    </div> 
    <div class="product"> 
    <a href="javascript:void();"> 
    <img src="https://unsplash.it/300/300" alt="" /> 
    <p class="title">Product Title</p> 
    </a> 
    <p class="price">£100.00</p> 
    <input class="small" value="Add to cart" type="submit"> 
    </div> 
    <div class="product"> 
    <a href="javascript:void();"> 
    <img src="https://unsplash.it/300/300" alt="" /> 
    <p class="title">Product Title</p> 
    </a> 
    <p class="price">£100.00</p> 
    <input class="small" value="Add to cart" type="submit"> 
    </div> 
    <div class="product"> 
    <a href="javascript:void();"> 
    <img src="https://unsplash.it/300/300" alt="" /> 
    <p class="title">Product Title</p> 
    </a> 
    <p class="price">£100.00</p> 
    <input class="small" value="Add to cart" type="submit"> 
    </div> 
    <div class="product"> 
    <a href="javascript:void();"> 
    <img src="https://unsplash.it/300/300" alt="" /> 
    <p class="title">Product Title</p> 
    </a> 
    <p class="price">£100.00</p> 
    <input class="small" value="Add to cart" type="submit"> 
    </div> 
</div> 

SCSS (erforderlich Präfixe hinzugefügt von Autoprefixer)

body { 
    padding-top: 24px; 
} 
.container { 
    max-width: 1000px; 
    margin-left: auto; 
    margin-right: auto; 
    display: flex; 
    justify-content: center; 
    flex-wrap: wrap; 
    border: 1px solid blue; 
} 

.product { 
    box-sizing: border-box; 
    display: flex; 
    border: 1px solid red; 
    padding-left: 12px; 
    padding-right: 12px; 
    flex-grow: 1; 
    max-width: 240px; 
    flex-basis: 50%; 
    flex-direction: column; 
    text-align: center; 
    margin-bottom: 24px; 
    img { 
    max-width: 100%; 
    } 
    .price { 
    margin-top: auto; 
    margin-bottom: auto; 
    } 
    p { 
    line-height: 24px; 
    } 
} 

Codepen der oben ist hier:

http://s.codepen.io/mikehdesign/debug/bgKyop/vPrKKdOWoEEr

dieser Code

Mit ich erwarten würde 4 Produkte in einer Reihe auf großen Bildschirmen zu sehen, die auf zwei als Minimum auf kleinen Bildschirmen zu reduzieren. So funktioniert es in Chrome, aber auf Safari sehe ich zwei Produkte in Folge auf allen Bildschirmgrößen.

Wenn ich flex-basis von .product entferne, dann bekomme ich 4 Produkte in einer Reihe auf großen Bildschirmen, aber das fällt auf 1 auf kleinen Bildschirmen, was nicht das ist, was ich will.

Kann mir jemand erklären, warum dies in Safari passiert und wie ich mindestens zwei Produkte pro Reihe zum Laufen bringen kann?

Answer 1

Safari hat Probleme mit der Berechnung flex-wrap, wenn Sie min-width verwenden, die Sie benötigen, um die Breite des Elements flex-basis zu kommunizieren. (Dieser Fehler wurde schließlich für die nächste Version von Safari behoben)

Ich würde Ihnen empfehlen, min-width zu .product hinzufügen, es sei denn, das ist nicht das gewünschte Aussehen, das Sie anstreben.

Andernfalls müssen Sie flex-basis: 25%; setzen und dann eine medien Abfrage für die Größe verwenden, wo es nur 2 Produkte flex-basis: 50%;

sollte

http://codepen.io/Dreith/pen/ZLjWWe