Firefox,Edge和IE中的Flexbox列反转

我正在努力创建一个快速响应的应用程序; 在更大的屏幕,还有的div的列表,您可以滚动起来,看看以前的申报单("传统"的行为).在较小的屏幕上,它显示相同的列表但反转顺序,因此向下滚动看到显示div.

我认为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中,listdiv正确显示滚动条.但是,在Firefox和IE/Edge中,滚动条可见但已禁用.

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

这是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 - 列反转和溢出不可滚动

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

外部有大小,边框和溢出

内部具有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