Javascript 缩放元素上的不成比例溢出滚动

我正在创建一个HTML画布像素艺术游戏

我有一个问题，缩放比例不相称

将大部分DOM包装为以下样式的

div

：

.ui {
  pointer-events: none;
  position: absolute;
  width: 50%;
  height: 50%;
  transform: scale(2);
  transform-origin: 0 0;
}

这很有效，所有内容都可以很好地扩展

但我有一个嵌套结构，大致如下：

.ui>.wrapper>.side bar>.content holder>.shop>.shop条目

最后一个

.shop entries

具有以下样式：

.shop-entries {
  flex: 1;
  overflow: auto;
}

其父级

.shop

具有以下样式：

.shop {
  display: flex;
  max-height: 100%;
  flex-direction: column;
}

出于某种原因，卷轴的速度是预期速度的两倍。 参见gif：

---

以前有人对此进行过争论吗？

将相关HTML代码包含到中可能会有所帮助。@showdev好的，我的bad将尝试创建最小的、可复制的示例，谢谢您指出它。@showdev我已经用示例重新发布了，请参阅：谢谢。