css - react - flex-wrap not working

flex-wrap no funciona como se esperaba en Safari

Question

En la página de inicio de http://www.shopifyexperte.de/ hay dos módulos de flex-box, uno debajo de "Kundenstimmen" y otro debajo de "Neueste Beiträge ...". Se supone que las cajas internas se envuelven cuando bajan de 220px y no crecen por encima del 30% de ancho. Esto funciona en las últimas versiones de Chrome, FF y Opera (todas en Mac), pero en Safari 8.0.5 (Mac) y en cualquier navegador con iOS, las cajas nunca forman una fila, incluso si hay espacio suficiente. Siempre se envuelven, cada uno en una fila propia.

El CSS para el contenedor:

.homepage-testimonial-container {
 display: flex;
 display: -webkit-flex;
 -webkit-flex: 1;
 flex: 1;
 -webkit-flex-direction: row;
 flex-direction: row;
 -webkit-flex-wrap: wrap;
 flex-wrap: wrap;
 -webkit-justify-content: space-between;
 justify-content: space-between;
 -webkit-align-items: flex-start;
 align-items: flex-start;
 margin-top: 1em;
}

El CSS para las cajas dentro del contenedor:

.homepage-testimonial {
 margin-bottom: 1em;
 min-width: 220px;
 max-width: 30%;
 -webkit-flex: 1 1 auto;
 flex: 1 1 auto;
}

Si desactivo -webkit-flex-wrap (estableciéndolo efectivamente en nowrap), todos los cuadros se alinean en una fila pero eventualmente desbordan el contenedor cuando la ventana del navegador se vuelve demasiado estrecha.

¿Es esto algún tipo de error en Safari / Webkit o estoy haciendo algo mal aquí?

Answer 1

Configuración de flex-basis: 20em también funciona, min-width: 20em no.

Answer 2

Establecer elementos secundarios como este parece funcionar para mí

flex: 1 0 auto;

Answer 3

Este es de hecho un error de Safari. Los detalles están disponibles en la excelente página de flexbugs , pero para citarla:

Safari usa declaraciones mínimas / máximas de ancho / alto para representar realmente el tamaño de los elementos flexibles, pero ignora esos valores al calcular cuántos elementos deben estar en una sola línea de un contenedor flexible de varias líneas. En su lugar, simplemente usa el valor de base de flexibilidad del artículo, o su ancho si la base de flexión se establece en automático.

Entonces, la solución / solución alternativa, como lo sugieren otras respuestas aquí, es establecer la flex-basis en un ancho explícito en lugar de auto .

Answer 4

Estoy usando Safari 11.0.1 y el error persiste. Uso Bootstrap 3 combinado con display: flex en mis elementos .row. Añadí siguiendo a mi CSS para apuntar a los elementos de la columna. Parece que hay algo sobre los porcentajes de ancho en Safari que no se respetan correctamente.

.row [class*=col-]{
    margin:0 -.3px;
}

Answer 5

Parece que esto es un error en Safari. En otro tema, probé usando el ancho mínimo en lugar de líneas auto en las que dices algo como -webkit-flex: 1 1 auto; .

Esta pregunta tiene alguna información: https://.com/a/30792851/756329

Answer 6

Tuve un problema similar en Safari (9.1.3) con el sistema de cuadrícula Bootstrap 3 (por ejemplo col-md-4) en combinación con flex. Lo resolví estableciendo el margin: 0 -1px; en los artículos col y flex-wrap: wrap; en la envoltura