Flexbox funktioniert nicht im Safari

Dem layout bin ich erstellen funktioniert nicht im Safari, obwohl es funktioniert perfekt in Chrome. Ich habe das Gefühl, es hat etwas zu tun mit der .wrapper oder die .frame aber ich habe versucht Einstellung der Flex-Shrink-Wert zu 0 ohne Erfolg.

JSFiddle

.frame {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    height: 100vh;
    position: relative;
    overflow: hidden;
    -webkit-flex: 1 1 auto;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;  
    -webkit-flex-flow: column nowrap;
    -ms-flex-flow: column nowrap;
    flex-flow: column nowrap;
    -webkit-align-items: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
    -webkit-justify-content: flex-start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -webkit-order: 0;
    -ms-flex-order: 0;
    order: 0;
}

.wrapper {
    -webkit-flex: 1 0 auto !important;
    -ms-flex: 1 0 auto !important;
    flex: 1 0 auto !important;
    -webkit-flex-wrap: nowrap !important;
    -ms-flex-wrap: nowrap !important;
    flex-wrap: nowrap !important;
}

.row, 
.wrapper {
    box-sizing: border-box;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex: 0 0 auto;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

Ich auch das Gefühl, es kann eine bessere Möglichkeit der Verwendung von Flexbox ohne die Notwendigkeit für den wrapper, aber kann nicht meinen Kopf um ihn herum.

Jede Hilfe wäre wirklich dankbar!

InformationsquelleAutor Chris Dance | 2015-03-11

  1. 10

    Das Problem auf Ihre .content Klasse. Speziell in diesem Abschnitt des Codes.

    .content {
    display: block;
  flex: 1 1 auto;
  background: #ddd;
  height: auto;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right:.5em;
  padding-bottom:.5em;
}

    Safari noch erfordert die -webkit- Präfix zu verwenden flexbox. So müssen Sie die -webkit- Präfix, um Sie flex Eigenschaft.

    Beispiel (JSFiddle):

    .content {
    display: block;
  -webkit-flex: 1 1 auto;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  background: #ddd;
  height: auto;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right:.5em;
  padding-bottom:.5em;
}
    In Safari habe ich noch das gleiche Problem, sogar nach dem hinzufügen des Präfix. Die .content-div wird verkleinert und keine der Spalten können Sie sehen, im inneren. tinypic.com/view.php?pic=1256jwn&s=8#.VP-LI_msV8E
    Welche version von Safari verwenden Sie?
    5.1.7 für Windows
    Ich fühle mich wie du meine Frage beantwortet es. Ich glaube nicht, dass Flexbox funktioniert auf dieser version von Safari und doch ist es die neueste version für Windows?
    Ja, Apple stoppte die Entwicklung von Safari für Windows. Safari 6 und unten nur mit Unterstützung der älteren Spezifikation.

    InformationsquelleAutor Alexander O'Mara

Schreibe einen Kommentar