Zeilenumbruch in der Flex-Box, die nicht in Safari eingebunden ist

Einem flex-container hat vier Kinder, jedes mit einem flex-basis von 25% ein eine min-width. flex-flow gesetzt ist, Zeile umbrochen wird. Andere Browser dann Safari damit umgehen, wie erwartet: wenn die min-width erreicht ist, packt es die das nächste Element in die nächste Zeile. In Safari ist es überlaufen des Behälters.

Siehe demo hier:
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

Stylus

.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

Irgendwelche Ideen?

Kommentar zu dem Problem
Es scheint ein Webkit-Bug, siehe bugs.webkit.org/show_bug.cgi?id=136041 Kommentarautor: Lars Bilharz
je einen workaround finden? Kommentarautor: zacaj

InformationsquelleAutor der Frage Lars Bilharz | 2014-08-18

  1. 47

    Pro eine kommentieren bugs.webkit.org, es scheint, die Lösung ist einfach!

    Wenn Ihr Stil ist 

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

    müssen Sie nur hinzufügen, mehr Evidenz zu Ihrer flex Erklärung. In der Tat, ich denke, dass nur eine Zeile ändern muss wie so

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

    InformationsquelleAutor der Antwort Joseph Hansen

  2. 5

    Ich bin mit einem max-width auf meine flex-items, so konnte ich dies lösen, indem Sie explizit festlegen des max-width innerhalb der flex Eigenschaft:

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

    InformationsquelleAutor der Antwort kgrote

  3. 1

    Dies ist ein Safari-IOS-bug. Also der fix /workaround ist, um die flex-basis, um eine explizite Breite eher als auto für Kind-element.

    InformationsquelleAutor der Antwort Prakash Upadhyay

  4. -1

    Einigen Browsern nicht vollständig unterstützt werden alle CSS3-Elemente. Versuchen Sie dies:

      display:-webkit-box;
  display:-webkit-flex;
  display:-webkit-flexbox;
  display:-moz-flex;
  display:-moz-box;
  display:-ms-flexbox;
  display:flex;

    InformationsquelleAutor der Antwort ninjaPixel

Schreibe einen Kommentar