Flexbox kolumna-rewers i przepełnienie w Firefox/IE

Question

Próbuję utworzyć responsywną aplikację; na większych ekranach jest lista elementów div i możesz przewinąć do, aby zobaczyć poprzednie divy (zachowanie "tradycyjne"). Na mniejszych ekranach pokazuje tę samą listę, ale odwraca kolejność, więc przewijanie dół widzi div pokazuje.

Wyobraziłem sobie, że flexbox byłby świetnym rozwiązaniem tego i było ... w Chrome.

Oto 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> 

I 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; 
} 

Jak również skrzypce to pokazać: http://jsfiddle.net/jbkmy4dc/3/

W Chrome list div poprawnie pokazuje pasek przewijania. Jednak w przeglądarce Firefox i IE/Edge pasek przewijania jest widoczny, ale wyłączony.

Wszelkie pomysły? Czy brakuje mi prefiksu dostawcy?

Answer 1

Jako obejście, można rozpowszechniać style kontenera spośród dwóch różnych pojemnikach:

• Zewnętrzna jeden z rozmiarów, granice i przepełnienie
• Wewnętrzna jeden ze stylów schematu flexbox

Jeśli ma to być przewijane do dołu domyślnie, można użyć 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; 
} 

Twój numer pochodzi z wyświetlacza: flex; Właściwość, która nie jest obsługiwana w IE 8 i IE 9 !! :)

Answer 3

To jest błąd w przeglądarkach Firefox, Edge i IE11.

Z paskiem przewijania pojawia się tylko w przeglądarce Chrome.

Po przełączeniu na column pasek przewijania działa we wszystkich przeglądarkach.

Więcej informacji:

• 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