html - Firefox、Edge 和 IE 中的 Flexbox column-reverse

Question

我正在尝试制作响应式应用；在较大的屏幕上，有一个 div 列表，您可以向上滚动以查看以前的 div(“传统”行为)。在较小的屏幕上，它显示相同的列表但顺序颠倒，因此向下滚动会看到显示 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;
}

以及展示它的 fiddle :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