Firefox，Edge和IE中的Flexbox列反转 [英] Flexbox column-reverse in Firefox, Edge and IE

问题描述

我正在尝试制作一个响应式应用程序；在较大的屏幕上，有一个div列表，您可以滚动 up 来查看以前的div(传统"行为).在较小的屏幕上，它显示相同的列表，但顺序相反，因此向下滚动 可以看到显示了div.

I'm trying to make a responsive app; on larger screens, there's a list of divs and you can scroll up to see previous divs ("traditional" behavior). On smaller screens, it shows the same list but reverses the order, so scrolling down sees shows divs.

我认为flexbox将是一个很棒的解决方案，它是在Chrome上的.

I figured flexbox would be an awesome solution to this, and it was... on 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/

As well as a fiddle to show it: http://jsfiddle.net/jbkmy4dc/3/

在Chrome中，list div正确显示滚动条.但是，在Firefox和IE/Edge中，滚动条可见但被禁用.

In Chrome, the list div properly shows a scroll bar. However, in Firefox and in IE/Edge, the scroll bar is visible but disabled.

有什么想法吗?我可能会缺少供应商前缀吗?

Any ideas? Am I missing a vendor prefix maybe?

推荐答案

作为一种解决方法，您可以在两个不同的容器之间分配容器的样式:

As a workaround, you can distribute the styles of your container among two different containers:

• 具有大小，边界和溢出的外层
• 内部具有flexbox样式

如果您希望默认情况下将其滚动到底部，则可以使用JS:滚动到div的底部?

If you want it to be scrolled to the bottom by default, you can use 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>

这篇关于Firefox，Edge和IE中的Flexbox列反转的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！