Столбец Flexbox – обратное и переполнение в Firefox / IE

Я пытаюсь сделать отзывчивое приложение; на больших экранах есть список div, и вы можете прокручивать вверх, чтобы увидеть предыдущие divs («традиционное» поведение). На меньших экранах он показывает тот же список, но меняет порядок, поэтому прокрутка вниз показывает divs.

Я полагал, что flexbox станет для него удивительным решением, и это было … в Chrome.

Вот HTML:

1
2
3
4
5
6
7
8
9

И, 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 div отображается строка прокрутки. Однако в Firefox и в IE / Edge полоса прокрутки видима, но отключена.

Есть идеи? Может быть, я пропускаю префикс поставщика?

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

  • Внешний с размерами, границами и переполнением
  • Внутренний с стилями 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; } 
 
1
2
3
4
5
6
7
8
9

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

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

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

Больше информации:

  • Ошибка 1042151 – гибкое направление: обратный столбец (или «flex-direction: column; justify-content: flex-end») с overflow-y: auto не прокручивается

  • Philip Walton / flexbugs – Колонка-реверс и переполнение-y не прокручиваются

 #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! 🙂