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

回答

相關問題