web-dev-qa-db-fra.com

Flexbox ne fonctionne pas dans Safari

La mise en page que je crée ne fonctionne pas dans Safari bien qu'elle fonctionne parfaitement dans Chrome. J'ai le sentiment que cela a quelque chose à voir avec le .wrapper ou la .frame mais j'ai essayé de définir la valeur de Flex Shrink sur 0 en vain.

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

Je pense également qu'il peut y avoir une meilleure façon d'utiliser Flexbox sans avoir besoin du wrapper, mais je ne peux pas me débrouiller.

Toute aide sera grandement appréciée!

htmlcsssafariflexbox
11
Chris Dance

Le problème est sur votre .content classe. Plus précisément, dans cette section de code.

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

Safari nécessite toujours le -webkit- préfixe à utiliser flexbox . Vous devrez donc ajouter le -webkit- préfixe pour vous flex propriété.

Exemple ( 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;
}
10
Alexander O'Mara