web-dev-qa-db-fra.com

Enveloppement de lignes dans une boîte flexible ne pas envelopper dans Safari

Un conteneur flexible a quatre enfants, chacun avec une base flexible de 25% et une largeur minimale. flex-flow est défini sur le retour à la ligne. Les navigateurs autres que Safari traitent cela comme prévu: si la largeur minimale est atteinte, il place l'élément suivant à la ligne suivante. Dans Safari, il déborde le conteneur.

Voir la démo ici: http://codepen.io/lbilharz/pen/aJbkI

JADE

h1 Why this ain't wrappin' in mobile-safari?
  .flex
    for i in ['one','two','three','four']
      .item
        h2=i

Style

.flex
  display flex
  flex-wrap wrap
  flex-direction row
  padding 1em
  background lightyellow
  .item
    flex 1 0 25%
    padding 1em
    box-sizing border-box
    min-width 15em

Des idées?

csssafariflexbox
36
Lars Bilharz

Par un commentaire sur bugs.webkit.org , il semble que la solution soit simple!

Si votre style est

div.flex {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-flex-direction: row;
    flex-direction: row;
}
div.flex .item {
    min-width: 15em;
    -webkit-flex: 1;
    flex: 1;
}

il vous suffit d'ajouter plus de détails à votre déclaration flex. En fait, je pense qu'une seule ligne doit changer comme ça

div.flex {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-flex-direction: row;
    flex-direction: row;
}
div.flex .item {
    min-width: 15em;
    -webkit-flex: 1 1 15em; /* this */
    flex: 1;
}
52
Joseph Hansen

J'utilise un max-width sur mes éléments flexibles, j'ai donc pu résoudre ce problème en définissant explicitement le max-width dans la propriété flex:

.wrapper {
  display: flex;
  flex-flow: row wrap;
}
li {
  width: 100%;
  max-width: 500px;
  flex: 1 1 500px;
}
6
kmgdev

Il s'agit d'un bogue Safari IOS. Le correctif/solution de contournement consiste donc à définir la base flexible sur une largeur explicite plutôt que sur auto pour l'élément enfant.

2
Prakash Upadhyay