Css 如何在Google Chrome的可滚动容器中实现元素的反向堆栈？

我已经用下面的代码实现了我想要的效果，但它似乎只在Firefox和Edge中起作用。在Chrome中，元素按需要堆叠，但没有水平滚动条，因此最右边的项目是隐藏的，用户无法访问

如您所见，页眉和页脚保持不变，my app元素是唯一可滚动的部分。左边的项目显示在右边的项目之上，右边的项目可以通过滚动查看

正文{
保证金：0；
高度：100vh；
}
我的应用程序{
显示器：flex；
高度：100vh；
弯曲方向：立柱；
}
页眉、页脚{
高度：25px；
背景色：黑色；
颜色：白色；
}
主要{
显示器：flex；
弯曲方向：行反向；
柔性生长：1；
证明内容：柔性端；
保证金：0；
溢出-x：自动；
宽度：100vw；
}
.卡片{
--卡片高度：200px；
--卡宽：250px；
对齐项目：居中；
背景：线性梯度（rgba（179156,95,1），rgba（150117,24,1））；
边界半径：5px；
盒影：1.5rem 0 2rem#222；
颜色：#000；
显示器：flex；
弯曲方向：立柱；
高度：var（--卡高度）；
证明内容：中心；
最小宽度：var（--卡片宽度）；
位置：相对位置；
文本对齐：居中；
过渡：所有.15秒轻松进出；
过渡：边距。3s进退自如；
宽度：var（--卡片宽度）；
}
.卡片：非（：类型的最后一个）{
左边距：计算值（var（--卡片宽度）*-.5）；
}
.卡：悬停：非（：类型的最后一个）{
左边距：0；
}

标题
1.
2.
3.
4.
5.
6.
7.
8.
9
10
11
12
13
14
15
页脚

看起来像是一个额外的包装器解决了您的问题：

正文{
保证金：0；
高度：100vh；
}
我的应用程序{
显示器：flex；
高度：100vh；
弯曲方向：立柱；
}
标题，
页脚{
高度：25px；
背景色：黑色；
颜色：白色；
}
主要{
柔性生长：1；
保证金：0；
溢出-x：自动；
宽度：100vw；
}
.包装纸{
显示器：flex；
弯曲方向：行反向；
证明内容：柔性端；
}
.卡片{
--卡片高度：200px；
--卡宽：250px；
对齐项目：居中；
背景：线性梯度（rgba（179156,95,1），rgba（150117,24,1））；
边界半径：5px；
盒影：1.5rem 0 2rem#222；
颜色：#000；
显示器：flex；
弯曲方向：立柱；
高度：var（--卡高度）；
证明内容：中心；
最小宽度：var（--卡片宽度）；
位置：相对位置；
文本对齐：居中；
过渡：所有.15秒轻松进出；
过渡：边距。3s进退自如；
宽度：var（--卡片宽度）；
}
.卡片：非（：类型的最后一个）{
左边距：计算值（var（--卡片宽度）*-.5）；
}
.卡：悬停：非（：类型的最后一个）{
左边距：0；
}

标题
1.
2.
3.
4.
5.
6.
7.
8.
9
10
11
12
13
14
15
页脚

对于具有

行

值的堆叠顺序问题，您必须为每张卡分配

z索引

，以便该卡

n

的z索引高于卡

n+1

。如果您的卡是在循环中生成的，并且您知道卡的数量，则可以添加一个内联

style=“z-index:{{{total-n}}”

。并不能解决你的全部问题，但可能会让你更接近！方向+一点js来重置滚动位置似乎确实是现在要做的事情，直到chrome的行为出现为止。