html - contenedor - Mantener la relación de aspecto de divs dentro de un flexbox parece no funcionar en Firefox

inline flex

Question

Tengo un problema con algunas funcionalidades de flexboxes en Firefox. Estoy tratando de mantener la relación de aspecto de los divs dentro de los flexboxes usando el relleno de fondo como un% del elemento principal y funciona absolutamente bien en Chrome, Opera e IE. El punto de fricción está en Firefox, donde todo parece quebrarse. El ajuste de prueba no está obteniendo la altura que debería.

¿Es esto simplemente un error que debo enviar a Mozilla o hay una solución a esto que puedo hacer con CSS / HTML? Anteriormente, utilizábamos imágenes de ajuste de tamaño para mantener las proporciones de aspecto, pero la inserción de carga no era aceptable. He incluido un ejemplo del problema a continuación y también hice un jsfiddle aquí: http://jsfiddle.net/sxxbqtnb/2/

.test {
    position: relative;
    height: auto;
    margin: 0 12%;
    background-color: transparent;
}
.test-wrap {
    width: 100%;
    list-style: none;
    padding: 0;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
.test-inner {
    position: relative;
    height: 0;
    width: 31%;
    display: inline-block;
    margin: 0 0 150px;
    padding-bottom: 18%;
    background-color: #666;
}

<div class="test">
    <ul class="test-wrap">
        <li class="test-inner"></li>
        <li class="test-inner"></li>
        <li class="test-inner"></li>
    </ul>
</div>

* editado para limpiar un poco mi css

Answer 1

Esto es realmente un error en Chrome. Estaba usando la misma técnica para crear un elemento bloqueado de relación de aspecto y estaba bien en Chrome y roto en Firefox.

Lo reporté a Mozilla y resulta que Firefox es correcto y Chrome tiene fallas.

Los elementos cuando se les da margen o relleno en las direcciones superior e inferior deben basarse en el ancho de los elementos principales. Sin embargo, cuando el padre es un ítem Flex o un ítem Grilla, entonces debe basarlo en la altura.

No tengo idea por qué. Acaban de decidir cambiarlo. Aquí está el informe de errores de Chromium: https://bugs.chromium.org/p/chromium/issues/detail?id=229568

Ojalá hubiera sido estandarizado de una forma u otra. Si es para mantener el estilo de Firefox, me encantaría saber un método para crear un elemento con ratio bloqueado cuando se trata de un elemento flexible o de cuadrícula.

Answer 2

Intente agregar display: flex al elemento superior superior, en este caso .test

También di height: 100% .test-inner height: 100% . Probado en FF 34.0.5

JSFiddle Link