Columna inversa y desbordamiento de Flexbox en Firefox / IE

Estoy tratando de hacer una aplicación receptiva; en pantallas más grandes, hay una lista de divs y puede desplazarse hacia arriba para ver divs anteriores (comportamiento “tradicional”). En pantallas más pequeñas, muestra la misma lista, pero invierte el orden, por lo que desplazarse hacia abajo ve muestra los divs.

Pensé que Flexbox sería una solución increíble para esto, y lo fue … en Chrome.

Aquí está el HTML:

1
2
3
4
5
6
7
8
9

Y, el CSS:

 #list { display: flex; flex-direction: column-reverse; height: 250px; overflow-y: scroll; border: 1px solid black; } .item { flex: 1; padding: 2em; border: 1px dashed green; } 

Así como un violín para mostrarlo: http://jsfiddle.net/jbkmy4dc/3/

En Chrome, la list div muestra correctamente una barra de desplazamiento. Sin embargo, en Firefox y en IE / Edge, la barra de desplazamiento está visible pero deshabilitada.

¿Algunas ideas? ¿Me falta un prefijo de vendedor?

Como solución alternativa, puede distribuir los estilos de su contenedor entre dos contenedores diferentes:

  • El exterior con los tamaños, bordes y desbordamiento
  • El interior con los estilos de flexbox

Si desea que se desplace hacia abajo por defecto, puede usar JS: ¿ Desplácese hasta la parte inferior de div?

 function scrollToBottom(el) { el.scrollTop = el.scrollHeight; } scrollToBottom(document.getElementById('list')); 
 #list { height: 250px; overflow-y: scroll; border: 1px solid black; } #inner-list { display: flex; flex-direction: column-reverse; } .item { flex: 1; padding: 2em; border: 1px dashed green; } 
 
1
2
3
4
5
6
7
8
9

Este es un error en Firefox, Edge e IE11.

Con flex-direction: column-reverse la barra de desplazamiento aparece solo en Chrome.

Si cambia a la column la barra de desplazamiento funciona en todos los navegadores.

Más información:

  • Error 1042151 – flexión: columna-inversa (o “flexión-dirección: columna; justificar-contenido: flex-end”) con desbordamiento-y: auto no es desplazable

  • Philip Walton / flexbugs – Columna-reversa y desbordamiento-y no desplazable

 #list { /*display: flex; flex-direction: column-reverse;*/ height: 250px; -ms-overflow-y:scroll; overflow-y:scroll; border: 1px solid black; } 

Su problema proviene de la pantalla: flex; propiedad, que no es compatible con IE 8 e IE 9 !! 🙂