Grille masonry avec flexbox, problème sur safari

L’objectif :

Ce code fonctionne pour Chrome, Firefox et Edge :

.single__portfolio__photos{
      display: flex;
      flex-wrap: wrap;
      padding: 0 1rem 1rem;
      column-gap: 1rem;
      row-gap: 1rem;
      width: calc(100% - 2rem);
      .single__portfolio__photos__brick{
        flex-grow: 1;
        flex-shrink: 1;
        flex-basis: auto;
        height: 250px;
        min-width: 150px;
      }
}

Mais pas sur Safari, voici le résultat :

Après plusieurs recherche :

Flexbox est une technologie CSS3. Cela signifie qu’il est relativement nouveau et que certains navigateurs ne prennent pas entièrement en charge les propriétés flexibles.

Voici un aperçu :

• IE 8 et 9 ne prennent pas en charge flexbox. Si vous souhaitez utiliser les propriétés flex dans ces navigateurs, ne perdez pas votre temps. Un polyfill flexbox a fait le tour pendant un certain temps, mais il n’a pas bien fonctionné et n’est plus maintenu.
• IE 10 prend en charge une version précédente de flexbox et nécessite des préfixes de fournisseur . Sachez que certaines propriétés de la spécification actuelle ne sont pas prises en charge dans IE10 (telles que flex-grow, flex-shrinket flex-basis). Voir l’ index des propriétés Flexbox 2012 .
• IE 11 est bon, mais bogué. Il est basé sur la norme flexbox actuelle . Voir l’ onglet PROBLÈMES CONNUS sur cette page pour certains des problèmes. Voir aussi : la propriété flex ne fonctionne pas dans IE
• Avec Chrome, Firefox et Edge, vous êtes bon partout. Vous trouverez des bogues mineurs et des incohérences, mais il existe généralement des solutions faciles. Vous devez être conscient du dimensionnement flexible minimal implicite , qui provoque parfois des problèmes de dimensionnement et de barre de défilement.
• Les versions 9 et supérieures de Safari prennent en charge la spécification flexbox actuelle sans préfixes. Cependant, les anciennes versions de Safari nécessitent des -webkit-préfixes. Parfois min-widthet max-widthcausent des problèmes d’alignement qui peuvent être résolus avec flexdes équivalents. Voir Les éléments Flex ne s’empilent pas correctement dans Safari

Source : https://stackoverflow.com/questions/35137085/flexbox-code-working-on-all-browsers-except-safari-why

Le code final :

.single__portfolio__photos{
      display: flex;
      flex-wrap: wrap;
      padding: 0 1rem 1rem;
      column-gap: 1rem;
      row-gap: 1rem;
      width: calc(100% - 2rem);
      .single__portfolio__photos__brick{
        flex: 1 1 24rem;
        height: 250px;
      }
}