Colonna Flex-reverse e overflow in Firefox/IE

Question

Sto provando a creare un'app reattiva; su schermi più grandi, c'è un elenco di div e puoi scorrere su per vedere le div precedenti (comportamento "tradizionale"). Sugli schermi più piccoli, mostra la stessa lista ma inverte l'ordine, quindi lo scorrimento in basso su visualizza le immersioni di spettacoli.

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

Ecco il codice HTML:

<div id="list"> 
    <div class="item">1</div> 
    <div class="item">2</div> 
    <div class="item">3</div> 
    <div class="item">4</div> 
    <div class="item">5</div> 
    <div class="item">6</div> 
    <div class="item">7</div> 
    <div class="item">8</div> 
    <div class="item">9</div> 
</div> 

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 di mostrarlo: http://jsfiddle.net/jbkmy4dc/3/

In Chrome, il list div mostra correttamente un 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?

Answer 1

Come soluzione alternativa, è possibile distribuire gli stili di contenitore tra due diversi contenitori:

• quello esterno con le dimensioni, i bordi e troppopieno
• quella interna con gli stili Flexbox

Se si desidera far scorrere verso il basso per impostazione predefinita, è possibile utilizzare JS: Scroll to bottom of 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; 
 
}

<div id="list"> 
 
    <div id="inner-list"> 
 
    <div class="item">1</div> 
 
    <div class="item">2</div> 
 
    <div class="item">3</div> 
 
    <div class="item">4</div> 
 
    <div class="item">5</div> 
 
    <div class="item">6</div> 
 
    <div class="item">7</div> 
 
    <div class="item">8</div> 
 
    <div class="item">9</div> 
 
    </div> 
 
</div>

Answer 2

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

Il tuo problema proviene da display: flex; proprietà, che non è supportato in IE 8 e IE 9 !! :)

Answer 3

Questo è un bug in Firefox, Edge e IE11.

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

Se si passa a column, la barra di scorrimento funziona su tutti i browser.

Maggiori informazioni:

• Bug 1042151 - flex-direction: column-reverse (or "flex-direction:column; justify-content:flex-end") with overflow-y: auto is not scrollable

• Philip Walton/flexbugs - Column-reverse and overflow-y not scrollable