Chrome中flex-direction为row-reverse/column-reverse且overflow:scroll时元素不渲染求助

发现Chrome浏览器存在Flex布局相关Bug：当容器同时设置overflow: scroll与flex-direction: row-reverse（或column-reverse）时，滚动列表至末尾会出现空白区域，原本的列表项无法正常显示。该问题在Safari中未出现（仅存在列表末尾内边距异常的小问题）。

复现步骤 #

• 创建<div>容器，设置overflow: scroll和flex-direction: row-reverse/column-reverse样式
• 向容器内填充任意类型元素即可触发Bug

解决方案 #

方案1：替换反向布局实现方式 #

放弃使用flex-direction: reverse，改为正向Flex布局，通过调整元素的DOM顺序，或利用margin/padding等样式实现视觉上的反向排列，从根源上避开Chrome的这个Bug。

方案2：嵌套滚动容器 #

在原Flex容器外层新增一个仅负责滚动的容器，将overflow: scroll移到外层容器，内部Flex容器仅处理反向布局逻辑。示例代码：

<div style="overflow: scroll; height: 300px;">
  <div style="display: flex; flex-direction: column-reverse;">
    <!-- 你的列表项元素 -->
  </div>
</div>

方案3：改用Grid布局 #

若场景允许，使用Grid布局替代Flex布局，通过调整元素的排列顺序或利用grid-auto-flow属性实现类似反向效果，避免触发Flex反向布局的滚动Bug。

内容的提问来源于stack exchange，提问作者Max P. Urban