Flexbox列 - 反向和溢出在Firefox/IE

我试图做出响应的应用程序;在大屏幕上，有一个div列表，你可以滚动向上看到以前的div（“传统”行为）。在较小的屏幕上，它显示相同的列表，但颠倒了顺序，所以滚动下降看到显示div。Flexbox列 - 反向和溢出在Firefox/IE

我认为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中，该list格设置正确显示滚动条。但是，在Firefox和IE/Edge中，滚动条可见但禁用。

任何想法？我是否缺少供应商前缀？

来源

2015-12-13 TranquilMarmot

作为一种变通方法，你可以在两个不同的容器中分配方式的容器：

外一个与大小，边界和溢出
内一个与Flexbox的风格。如果你想让它滚动以默认的底部

，你可以使用JS：Scroll to bottom of 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>

来源

2015-12-18 01:09:03 Oriol

哇，我不能相信这实际上可行...谢谢！ – TranquilMarmot

in chrome我只看到3 2 1而没有滚动条 – rofrol

@rofrol Chrome浏览器需要在'＃inner'上使用'flex-shrink：0'。我已经更新了答案，谢谢。 – Oriol

-3

#list { 
    /*display: flex; 
    flex-direction: column-reverse;*/ 
    height: 250px; 
    -ms-overflow-y:scroll; 
    overflow-y:scroll; 
    border: 1px solid black; 
}

您的问题来自display：flex;财产，这是不支持在IE 8和IE 9！ :)

来源

2015-12-13 10:56:56

我只在IE 10和边缘 – TranquilMarmot

这是Firefox，Edge和IE11中的一个错误。

使用flex-direction: column-reverse滚动条仅在Chrome中出现。

如果切换到column，则滚动条可在所有浏览器上运行。

的更多信息：

来源

2015-12-13 13:22:06

测试哦很酷，看起来像工作组已经接受了一个定义将解决这个问题...我想我现在会继续使用它，并希望供应商可以就某些功能达成一致;） – TranquilMarmot

Flexbox列 - 反向和溢出在Firefox/IE

回答

相关问题