web-dev-qa-db-fra.com

Chevauchement d'éléments Flexbox CSS dans Safari

Quel est le bon CSS pour forcer Safari à ne pas superposer des éléments flex dans un conteneur flex par défaut?

Safari semble donner trop de largeur pour assouplir les éléments contenant beaucoup de contenu.

Safari: (v8.0.8 sur Mac OS X 10.10.5 Yosemite)
 flex-items-safari.png

Les éléments flex s'affichent correctement dans Chrome et Firefox.

Chrome:
 enter image description here


CSS:

main {
   display: flex;
   border: 3px solid silver;
   }
main >div {
   background-color: Plum;
   margin: 10px;
   }


HTML:

<main>
   <div>
      Doh!!!!!!!!!!!
   </div>
   <div>
      Lorem ipsum dolor sit amet, consectetur adipiscing
      elit, sed do eiusmod tempor incididunt ut labore et
      dolore magna aliqua. Ut enim ad minim veniam.
   </div>
</main>

Violon avec le code:
http://jsfiddle.net/LL05grus/6

htmlcsssafariflexbox
27
Dem Pilafian

L'élément se contracte. Vous devez définir la propriété flex-shrink sur 0 sur l'élément de réduction.

main >div:first-child {
  -webkit-flex: 0;
  flex-shrink: 0;
}
41
Underfrog

J'ai également eu un problème similaire où la direction de la boîte flexible a été remplacée par des éléments superposés de colonnes sur iPad. Le problème concernait la propriété flex: 0 1 0; appliquée à l'élément enfant. Donne la valeur de base auto. flex: 0 1 auto;

.parent{
    display: flex;
    flex-direction: column;
}
.parent .child{
    flex: 0 1 auto;
}
0
Lasithds