Question

我基本上试图在一个非常大的画布（10000x10000 +）中使用滚动条作为溢出。据我了解，画布本身不会溢出，因此我希望它的父级（一个div）处理溢出。

当我不使用CSS Flex / FlexBox时，我已经设法做到了，但是现在我正尝试使用它，我无法使其正常工作。

我四处张望，试图了解CSS Flex的工作原理，但这是我第一次使用它，因此我对如何使CSS Flex正常工作没有真正的了解。

这是我的基本知识：

这是我的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，我要做的就是将画布的宽度和高度设置为10000。

我希望画布容器具有滚动条，以便可以浏览并滚动画布的所有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>

Answer 2

像canvas.width = 10000那样设置画布宽度就是设置场景（在画布内部）的大小。

考虑一下像<div>那样的background-image，并且背景大小为10000x10000的情况。您需要将<div>的宽度设置为10000才能影响，无论实际背景的大小如何。

要获得理想的效果，应将其canvas.style.width设置为 10000 。 take a look at this live version来查看它是否是您想要的。

Answer 3

首先，您不应该将#canvasContainer显示属性设置为“ flex”。它必须是“ block”。因此，您无需为#canvas设置flex属性，因为它的父级不再是flex容器。另外，您还应该从#canvas中删除“ overflow”属性，然后将其移至其父对象#canvasContainer。

您还已经将#canvas的宽度和高度设置为100％。你为什么这么做？如果要在CSS中设置画布的宽度和高度，请将其设置为10000px或保留它并使用JavaScript进行设置。

所以类似这样的方法应该可以解决问题：

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

#canvas {
  width: 10000px;
  height: 10000px;
  overflow: scroll;
}

尝试使用CSS flex

3 个答案: