css - que - flex-wrap not working

Row Wrap en flex-box no envuelto en Safari

Question

Un contenedor flexible tiene cuatro hijos, cada uno con una base flexible del 25% y un ancho mínimo. flex-flow está configurado para envolver filas. Los navegadores distintos de Safari manejan esto como se esperaba: si se alcanza el ancho mínimo, envuelve el siguiente elemento en la siguiente fila. En Safari desborda el contenedor.

Vea la demostración aquí: 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

Aguja

.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

¿Algunas ideas?

Answer 1

¡Por un comentario en bugs.webkit.org , parece que la solución es simple!

Si tu estilo es

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

solo necesita agregar más explícita a su declaración flex . De hecho, creo que solo una línea necesita cambiar así

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

Answer 2

Algunos navegadores no son totalmente compatibles con todos los elementos de CSS3. Prueba esto:

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

Answer 3

Este es un error de Safari IOS. Entonces la solución / solución consiste en establecer la base flexible en un ancho explícito en lugar de automático para el elemento hijo.

Answer 4

Estoy usando un max-width en mis elementos flexibles, así que pude resolver esto estableciendo explícitamente el max-width dentro de la propiedad flex :

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