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;
}

以及展示它的小提琴:http://jsfiddle.net/jbkmy4dc/3/

在Chrome中,listdiv正确显示滚动条.但是,在Firefox和IE/Edge中,滚动条可见但已禁用.

有任何想法吗？我可能错过了供应商前缀吗？

Answer 1

这是Firefox,Edge和IE11中的一个错误.

随着flex-direction: column-reverse滚动条只出现在Chrome.

如果切换到column滚动条适用于所有浏览器.

更多信息:

• 错误1042151 - flex-direction:column-reverse(或"flex-direction:column; justify-content:flex-end")with overflow-y:auto不可滚动

• Philip Walton/flexbugs - 列反转和溢出不可滚动

Answer 2

作为解决方法,您可以在两个不同的容器中分发容器的样式:

• 外部有大小,边框和溢出
• 内部具有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>