Firefox、Edge 和 IE 中的 Flexbox 列反转

Posted 2023-03-05

【中文标题】Firefox、Edge 和 IE 中的 Flexbox 列反转

【英文标题】：Flexbox column-reverse in Firefox, Edge and IE

【发布时间】：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 中，滚动条可见但已禁用。

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

【参考方案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，滚动条适用于所有浏览器。

更多信息：

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

【讨论】：

太棒了，看起来工作组已经接受了一个可以解决这个问题的定义......我想我现在会继续使用它，并希望供应商可以就某些功能达成一致;)跨度>

此错误已在 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 容器。