Flexbox обратный столб и переполнение в Firefox/IE

Я пытаюсь сделать отзывчивое приложение; на больших экранах есть список 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 полоса прокрутки видима, но отключена.

Любые идеи? Могу ли я пропускать префикс поставщика?

Ответы

Ответ 1

В качестве обходного пути вы можете распространять стили своего контейнера между двумя различными контейнерами:

Внешний с размерами, границами и переполнением
Внутренний с стилями flexbox

Если вы хотите, чтобы по умолчанию она была прокручена вниз, вы можете использовать JS: Прокрутите вниз до 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>

Ответ 2

Это ошибка в Firefox, Edge и IE11.

С flex-direction: column-reverse полоса прокрутки отображается только в Chrome.

Если вы переключаетесь на column, полоса прокрутки работает во всех браузерах.

Дополнительная информация:

Ответ 3

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

Ваша проблема возникает из-за отображения: flex; свойство, которое не поддерживается в IE 8 и IE 9!:)