Question

我试图制作一个快速响应的应用;在较大的屏幕上，有一个div列表，您可以滚动向上查看以前的div（＆＃34;传统＆＃34;行为）。在较小的屏幕上，它显示相同的列表但反转顺序，因此滚动向下会看到显示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中，list div正确显示滚动条。但是，在Firefox和IE / Edge中，滚动条可见但已禁用。

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

Answer 1

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

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

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

更多信息：

Bug 1042151 - flex-direction: column-reverse (or "flex-direction:column; justify-content:flex-end") with overflow-y: auto is not scrollable
Philip Walton / flexbugs - Column-reverse and overflow-y not scrollable

Answer 2

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

外部尺寸，边框和溢出
具有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>

Answer 3

由于此firefox错误仍然存在：请注意第二个链接下 answer by Michael_B中提供的kumarharsh给出了两个纯CSS的“怪胎具有向下滚动的解决方法” 行为与Chrome相同。从kumarharsh's post的philipwalton list of flexbugs开始：

到那时，这里有一些怪异的解决方法，其中包含2种转换：http://jsfiddle.net/RedDevil/qar7Lc5s/（旋转转换）或http://jsfiddle.net/RedDevil/0z5t6j9m/（比例转换-更好的IMO）

缺点：解决方案使用List<ResultType>并在Firefox中显示内容滚动时失去清晰度。滚动行为也是颠倒的，或者滚动条在错误的一侧。

Answer 4

这是firefox中已知的bug，并已在bugzilla中登录。
请投票this bug。

他们正在考虑在今年内修复此问题（仅在打开bug后的6年内）

Firefox，Edge和IE中的Flexbox列反转

4 个答案: