Colonna inversa Flexbox e overflow in Firefox / IE

Sto cercando di creare un’app retriggers; su schermi più grandi, c’è un elenco di div e puoi scorrere verso l’ alto per vedere le div precedenti (comportamento “tradizionale”). Sugli schermi più piccoli, mostra la stessa lista ma inverte l’ordine, quindi scorrere verso il basso mostra le div.

Ho pensato che Flexbox sarebbe stata una soluzione eccezionale per questo, ed è stato … su Chrome.

Ecco l’HTML:

1
2
3
4
5
6
7
8
9

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

Così come un violino per mostrarlo: http://jsfiddle.net/jbkmy4dc/3/

In Chrome, l’ list div mostra correttamente una barra di scorrimento. Tuttavia, in Firefox e in IE / Edge, la barra di scorrimento è visibile ma disabilitata.

Qualche idea? Mi manca forse un prefisso del venditore?

Come soluzione alternativa, puoi distribuire gli stili del tuo contenitore tra due contenitori diversi:

  • Quello esterno con dimensioni, bordi e troppopieno
  • Quello interno con gli stili di flexbox

Se si desidera che venga spostato verso il basso per impostazione predefinita, è ansible utilizzare JS: scorrere fino alla fine di 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

Questo è un bug in Firefox, Edge e IE11.

Con la flex-direction: column-reverse la barra di scorrimento viene visualizzata solo in Chrome.

Se passi alla column la barra di scorrimento funziona su tutti i browser.

Maggiori informazioni:

  • Bug 1042151 – flex-direction: column-reverse (o “flex-direction: column; justify-content: flex-end”) con overflow-y: auto non è scorrevole

  • Philip Walton / flexbugs – Colonna inversa e overflow-y non scorrevole

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

Il tuo problema viene dal display: flex; proprietà, che non è supportato in IE 8 e IE 9 !! 🙂