大内部时，将内部溢出元素设置为左上角

Question

我有一个包含画布的div

div上有css，看起来像这样：

.workspace-area {
    overflow: auto;
    position: absolute;
    left: 0;
    right: 0;
    top: 35px;
    bottom: 35px;
    margin: auto;
}

canvas上面有css，如下所示：

canvas {
    right: 0;
    left: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    position: absolute;
    z-index: 0;
}

我遇到的问题是画布适合div居中（这是我想要的），但是当画布大于div时它仍然是垂直居中的，并且div溢出不会滚动到画布的顶部，因此无法滚动画布的顶部。

这是我的意思的小提琴，例如，小提琴中有两幅画布。在实际应用程序中，只有一个画布。

https://jsfiddle.net/q1j6sjcd/1/

所以，基本上：

• 小画布应居中
• 大画布（溢出）应位于左上角