当 flex-direction: row-reverse || 时，Chrome 不会渲染项目 带有溢出的列反转：滚动

Question

看来我发现了一个 chrome bug。

工作演示就在这里。如果您尝试滚动列表，您最终会看到空格而不是列表项。在 Safari 中未观察到此问题（列表末尾的填充损坏除外）。

要重现该问题，请<div/>使用overflow: scroll和flex-direction: row-reverse或column-reverse作为容器创建并用任何类型的项目填充它。完整代码在这里

有谁知道如何解决这个问题？

Answer 1

我找到了两个解决方法。

解决方法1

最简单的解决方法是添加content-visibility: auto;到item类中：

.item {
  /* other styles */
  content-visibility: auto;
}

本文详细介绍了此属性，并在示例部分提供了精彩的视频演示。

此解决方法解决了该问题，但导致滚动行为非常卡顿。可以用contain-intrinsic-size财产来解决。同一篇文章在本节中对此进行了介绍。这是一个引用：

为了实现内容可见性的潜在好处，浏览器需要应用尺寸限制以确保内容的渲染结果不会以任何方式影响元素的尺寸。这意味着该元素将像空一样进行布局。如果元素没有在常规块布局中指定高度，则其高度将为 0。

这可能并不理想，因为滚动条的大小会发生变化，依赖于每个故事的高度非零。

值得庆幸的是，CSS 提供了另一个属性，contain-intrinsic-size，如果元素受到尺寸限制的影响，它可以有效地指定元素的自然尺寸。

解决方法2

我最终用column-reversejust 替换了行为column，然后用 滚动到列表底部element.scrollIntoView。

这是我用于此目的的代码（React）：/sf/answers/3658634871/

Answer 2

要解决此问题，请使 Flex 容器的父容器也是带有flex-direction: column.

当主弹性容器也是弹性项目时，问题似乎就消失了。