Firefox、Edge 和 IE 中的 Flexbox 列反转答案

【问题标题】：Flexbox column-reverse in Firefox, Edge and IEFirefox、Edge 和 IE 中的 Flexbox 列反转
【发布时间】：2016-03-18 21:34:23
【问题描述】：

我正在尝试制作一个响应式应用；在较大的屏幕上，有一个 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;
}

以及显示它的小提琴：http://jsfiddle.net/jbkmy4dc/3/

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

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

【问题讨论】：

标签： html css internet-explorer firefox flexbox

【解决方案1】：

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

他们正在考虑在今年修复它（仅在 bug 出现 6 年后）

【讨论】：

7 年过去了，我面临这个问题。这有什么更新吗？
我相信这已在 > Firefox 81 中修复

【解决方案2】：

由于这个 firefox-bug 仍然存在：请注意在第二个链接下在answer by Michael_B 中提供，kumarharsh 提供了两个仅 css 的“whacky 具有向下滚动功能的解决方法[s]" 行为就像在 chrome 中一样。来自kumarharsh's post 上philipwalton list of flexbugs：

到那时，这里有一些奇怪的解决方法，有 2 个变换：http://jsfiddle.net/RedDevil/qar7Lc5s/（旋转变换）或 http://jsfiddle.net/RedDevil/0z5t6j9m/（缩放变换 - 更好的 IMO）

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

【讨论】：

这种解决方案是否有可能使滚动行为不颠倒？

【解决方案3】：

这是 Firefox、Edge 和 IE11 中的错误。

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

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

更多信息：

【讨论】：

太棒了，看起来工作组已经接受了一个可以解决这个问题的定义......我想我现在会继续使用它，并希望供应商可以就某些功能达成一致;)跨度>
此错误已在 2020 年 9 月发布的 FF 81 中修复。Edge 现在基于 Chromium，因此它也可以在那里工作。

【解决方案4】：

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

带有大小、边框和溢出的外层
带有 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>

【讨论】：

在 chrome 中我只看到 3 2 1 并且没有滚动条
@rofrol Chrome 需要flex-shrink: 0 #inner。我已经更新了答案，谢谢。
@rofol 或者更好的是，不需要将外部容器设置为 flex 容器。