Попытка переполнения большого холста с помощью полос прокрутки с помощью CSS flex

Question

Я пытаюсь получить очень большой холст (10000x10000 +) с полосами прокрутки в качестве переполнения. Насколько я понимаю, сам холст не может переполниться, и поэтому я хочу, чтобы его родитель (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, все, что я делаю, это устанавливаю ширину и высоту холста равными 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

Прежде всего, вам не следует устанавливать свойство отображения #canvasContainer равным «flex».Это должен быть «блок».Поэтому вам не нужно устанавливать свойство flex для #canvas, потому что его родитель больше не является контейнером flex.Также вы должны удалить свойство «overflow» из #canvas и переместить его в родительский объект, который является # 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;
}

Answer 3

Установка ширины холста как canvas.width = 10000 Установка размера сцены (внутри холста).

Думайте об этом как <div>, у которого background-image, а фон имеет размер 10000x10000. Вам нужно установить ширину <div>, равную 10000, чтобы она влияла независимо от размера фона.

, чтобы достичь желаемого эффекта, вы должны установить его canvas.style.width равным 10000 . взгляните на эту живую версию , чтобы узнать, хотите ли вы этого или нет.