flex-wrap ne fonctionne pas comme prévu dans Safari

Sur la page d’accueil de http://www.shopifyexperte.de/, il y a deux modules flex-box, l’un sous “Kundenstimmen” et l’autre sous “Neueste Beiträge …”. Les boîtes intérieures sont censées s’enrouler lorsqu’elles descendent sous 220px et ne dépassent pas 30% de largeur. Cela fonctionne dans les derniers Chrome, FF et Opera (tous sur Mac), mais dans Safari 8.0.5 (Mac) et n’importe quel navigateur iOS, les cases ne forment jamais une ligne même s’il y a assez de place. Ils enveloppent toujours, chacun sur une rangée propre.

Le CSS pour le conteneur:

.homepage-testimonial-container { display: flex; display: -webkit-flex; -webkit-flex: 1; flex: 1; -webkit-flex-direction: row; flex-direction: row; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-justify-content: space-between; justify-content: space-between; -webkit-align-items: flex-start; align-items: flex-start; margin-top: 1em; } 

Le CSS pour les cases à l’intérieur du conteneur:

 .homepage-testimonial { margin-bottom: 1em; min-width: 220px; max-width: 30%; -webkit-flex: 1 1 auto; flex: 1 1 auto; } 

Si je désactive -webkit-flex-wrap (en le définissant de manière efficace), toutes les cases sont alignées mais finissent par déborder du conteneur lorsque la fenêtre du navigateur devient trop étroite.

Est-ce une sorte de bogue dans Safari / Webkit ou est-ce que je fais quelque chose de mal ici?

Il semble que ce soit un bug dans Safari. Dans un autre numéro, j’ai testé l’utilisation de lignes min-width à la place de lignes auto où l’on dit quelque chose comme -webkit-flex: 1 1 auto; .

Cette question a quelques infos: https://stackoverflow.com/a/30792851/756329

Définir des éléments enfants comme cela semble fonctionner pour moi

 flex: 1 0 auto; 

J’ai eu un problème similaire dans Safari (9.1.3) avec le système de grid Bootstrap 3 (par exemple col-md-4) en combinaison avec flex. Je l’ai résolu en définissant la margin: 0 -1px; sur les articles de col et flex-wrap: wrap; sur l’emballage

Réglage flex-basis: 20em fonctionne également, min-width: 20em ne le fait pas.

C’est en effet un bug de Safari. Les détails sont disponibles sur l’excellente page flexbugs , mais pour le citer:

Safari utilise des déclarations de largeur / hauteur min / max pour afficher la taille des éléments flexibles, mais ignore ces valeurs lors du calcul du nombre d’éléments devant figurer sur une seule ligne d’un conteneur flexible multiligne. Au lieu de cela, il utilise simplement la valeur de base de l’élément, ou sa largeur si la base de flexibilité est définie sur auto.

Ainsi, le correctif / solution de contournement – comme suggéré par d’autres réponses ici – consiste à définir la flex-basis sur une largeur explicite plutôt auto .

J’utilise Safari 11.0.1 et le bogue persiste. J’utilise Bootstrap 3 combiné avec display: flex sur mes éléments .row. J’ai ajouté à mon css pour cibler les éléments de la colonne. Il semble y avoir quelque chose à propos des pourcentages de largeur dans Safari qui ne sont pas correctement respectés.

 .row [class*=col-]{ margin:0 -.3px; }