0

I want to show a canvas, possibly larger than the viewport.

enter image description here

The layout is common: navigation on the left, canvas, controls etc... on the right.

When the canvas is large, I want scrollbars around the canvas where needed. That's what the overflow=auto on the canvas div wrapper is for.

html {
  height: 100%;
  margin: 0;
}

body {
  height: 100%;
  margin: 0;
  background: yellow;
}

.container {
  display: grid;
  grid-template-columns: fit-content(200px) 1fr;
  height: 100%;
  overflow: hidden;
  background-color: #b30a96;
}

.navigation {
  background-color: darkkhaki;
}

.right {
  display: flex;
  height: 100%;
  flex-direction: column;
  background-color: red;
}

.canvas-wrapper {
  overflow: auto;
  background-color: #DE8D00;
}

#canvas {
  display: block;
  background-color: #0bb314;
}

.rest {
  background-color: aquamarine;
}
<div class="container">
  <div class="navigation">
    navigation
  </div>

  <div class="right">
    <div class="canvas-wrapper">
      <canvas id="canvas" width="2500" height="1800"></canvas>
    </div>

    <div class="rest">
      rest...
    </div>

  </div>
</div>

With only the flexbox, I see scrollbars just fine. As soon as I embed the flexbox in the grid, no more scrollbars.

A number of related posts shed some light but got me no closer to solving the problem.

I tried various permutations of width, height, max-width, max-height, min-width, min-height on the wrapper, the flexbox, the grid, with no satisfying result.

Before resorting to JavaScript and forcing the size of the div wrapper, I would like to know whether this can be solved in pure CSS.

Kameron
  • 10,240
  • 4
  • 13
  • 26
user11679726
  • 1
  • 1

1 Answers1

0

after setting

grid-template-columns: fit-content(200px) minmax(0,1fr);

in class .container and adding

min-height: 0;

to class .right, the scrollbars are finally visible around the canvas.

As I understand it, the problem was that the div wrapper didn't have a size, and setting a minimum of zero somehow helps.

user11679726
  • 1
  • 1