javascript - 尝试使用 CSS flex 使大 Canvas 溢出滚动条

Question

我基本上想拥有一个非常大的 Canvas (10000x10000 +)，滚动条作为溢出。据我了解， Canvas 本身不能溢出，所以我希望它的父级(一个 div)来处理溢出。

当我不使用 CSS Flex/FlexBox 时，我设法做到了这一点，但现在我正在尝试使用它，但我无法让它工作。

我环顾四周试图了解 CSS Flex 的工作原理，但这是我第一次使用它，所以我对我应该尝试做什么才能让它工作没有任何真正的了解。

这是我所拥有的基本水平:

https://jsfiddle.net/vbqpmy5r/10/

这是我的 CSS 文件:

html, body {
  margin: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

* {
  box-sizing: border-box;
}

#container {
  display: flex;
  justify-content: space-evenly;
  height: 100%;
  padding-bottom: 4em;
}

#container > #canvasContainer {
  flex: 1;
}

#container > #inspectorContainer {
  flex: 0 0 20vw;
}

#buttonContainer {
  display: flex;
  padding: 1em;
  font-family: Helvetica, Arial, sans-serif;
}

#buttonContainer > button {
  height: 3em;
}

#canvasContainer {
  display: flex;
  border-style: solid;
  border-width: 1px;
  border-color: rgba(0, 0, 0, 0.2);
  font-family: Helvetica, Arial, sans-serif;
  overflow: scroll;
}

#previewContainer {
  display: flex;
  padding: 1em;
  width: 10em;
  border-style: solid;
  border-left-style: none;
  border-width: 1px;
  border-color: rgba(0, 0, 0, 0.2);
  background-color: rgb(236, 236, 236);
  font-family: Helvetica, Arial, sans-serif;
  overflow: scroll;
}

#canvas {
  flex: 1 1;
  width: 100%;
  height: 100%;
  overflow: scroll;
}

这是我的 html:

<div id="buttonContainer">
  <button>
  Button 1
  </button>
  <button>
  Button 2
  </button>
  <button>
  Button 3
  </button>
  <button>
  Button 4
  </button>

</div>
<div id="container">
  <div id="canvasContainer">
    <canvas id="canvas"></canvas>
  </div>
  <div id="previewContainer">
    Content
  </div>
</div>

至于 Javascript，我所做的只是将 Canvas 的宽度和高度设置为 10000。

我希望 Canvas 容器有滚动条，这样我就可以遍历和滚动 Canvas 的所有 10000 x 10000 像素；实际上，设置大小似乎没有任何作用。

非常感谢任何帮助。

Answer 1

将align-items:flex-start添加到#canvasContainer并设置

#canvas {
  flex: 0 0 auto;
}

请看下面的片段:

  const canvas = document.getElementById("canvas");
  canvas.width = 10000;
  canvas.height = 10000;

html, body {
  margin: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

* {
  box-sizing: border-box;
}

#container {
  display: flex;
  justify-content: space-evenly;
  height: 100%;
  padding-bottom: 4em;
}

#container > #canvasContainer {
  flex: 1;
}

#container > #inspectorContainer {
  flex: 0 0 20vw;
}

#buttonContainer {
  display: flex;
  padding: 1em;
  font-family: Helvetica, Arial, sans-serif;
}

#buttonContainer > button {
  height: 3em;
}

#canvasContainer {
  display: flex;
  align-items:flex-start;
  border-style: solid;
  border-width: 1px;
  border-color: rgba(0, 0, 0, 0.2);
  font-family: Helvetica, Arial, sans-serif;
  overflow: scroll;
}

#previewContainer {
  display: flex;
  padding: 1em;
  width: 10em;
  border-style: solid;
  border-left-style: none;
  border-width: 1px;
  border-color: rgba(0, 0, 0, 0.2);
  background-color: rgb(236, 236, 236);
  font-family: Helvetica, Arial, sans-serif;
  overflow: scroll;
}

#canvas {
  flex: 0 0 auto;
}

<div id="buttonContainer">
  <button>
  Button 1
  </button>
  <button>
  Button 2
  </button>
  <button>
  Button 3
  </button>
  <button>
  Button 4
  </button>

</div>
<div id="container">
  <div id="canvasContainer">
    <canvas id="canvas"></canvas>
  </div>
  <div id="previewContainer">
    Content
  </div>
</div>