Firefox，Edge和IE中的Flexbox列反转

Question

我正在尝试制作一个响应式应用程序；在更大的屏幕，还有的div的列表，您可以滚动 起来
，看看以前的申报单（“传统”的行为）。在较小的屏幕上，它显示相同的列表，但顺序相反，因此 向下 滚动将显示div。

我认为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;
}

在Chrome中，listdiv会正确显示滚动条。但是，在Firefox和IE / Edge中，滚动条可见但被禁用。

有任何想法吗？我可能缺少供应商前缀吗？

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