Flexbox div не будет прокручиваться по firefox [duplicate]

Question

Flexbox div не будет прокручиваться по firefox [duplicate]

Вы можете попробовать использовать что-то вроде HTML Tidy , чтобы очистить любой «сломанный» HTML и преобразовать HTML в XHTML, который затем можно разобрать с помощью парсера XML.

13

css css3 firefox flexbox

задан TranquilMarmot 13 December 2015 в 10:01

3 ответа

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

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

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

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

10

ответ дан Michael_B 27 August 2018 в 07:44

1

– TranquilMarmot 13 December 2015 в 20:28

#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! :)

-4

ответ дан Nasco.Chachev 27 August 2018 в 07:44

1

– TranquilMarmot 13 December 2015 в 20:23

Другие вопросы по тегам:

css css3 firefox flexbox

Похожие вопросы:

score 10 · Accepted Answer

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

Внешний с размерами, границами и переполнением
Внутренний с стилями 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>