Я пытаюсь сделать отзывчивое приложение; на больших экранах есть список div, и вы можете прокручивать вверх, чтобы увидеть предыдущие divs ( "традиционное" поведение). На меньших экранах он показывает тот же список, но меняет порядок, поэтому прокрутка вниз показывает divs.
Я полагал, что flexbox будет отличным решением для этого, и это было... в Chrome.
Здесь 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>
И, 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;
}
Как и скрипка, чтобы показать это: http://jsfiddle.net/jbkmy4dc/3/
В Chrome на вкладке list
отображается строка прокрутки. Однако в Firefox и в IE/Edge полоса прокрутки видима, но отключена.
Любые идеи? Могу ли я пропускать префикс поставщика?