"flex: 1 1 0%" with a canvas child that adapts its size is not working properly

Question

The following example creates a header, a canvas, and a footer. The canvas is told to fill the space between header and footer. The following happens:

Expand the window: The canvas grows
Shrink the window: Scrollbars appear, but I want the canvas to shrink

Why is the canvas not shrinking and how can I make it shrink?

const canvas = document.getElementById("canvas");

function paint() {
  canvas.width = canvas.offsetWidth;
  canvas.height = canvas.offsetHeight;
  const ctx = canvas.getContext("2d");
  ctx.fillText(canvas.height, canvas.width / 2, canvas.height / 2);
}

paint();
new ResizeObserver(paint).observe(canvas);

.main {
  height: 100%;
  display: flex;
  flex-flow: column;
}

.canvas {
  flex: 1 0 0%;
}

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

<div class="main">
  <div class="header">
    Header
  </div>
  <canvas id="canvas" class="canvas"></canvas>
  <div class="footer">
    Footer
  </div>
</div>

@LearningMathematics sorry, thought it was implicit. Added the question now... — user3612643, Aug 25 '21 at 08:03
There is a loop limit error, you'll find the solution here: https://stackoverflow.com/questions/49384120/resizeobserver-loop-limit-exceeded — DanieleAlessandra, Aug 25 '21 at 08:07

score 1 · Accepted Answer · answered Aug 25 '21 at 08:27

Setting canvas height to 0 and flex-grow to 1 seems to achieve what you want.

const canvas = document.getElementById("canvas");



function paint() {
  canvas.width = canvas.offsetWidth;
  canvas.height = canvas.offsetHeight;
  const ctx = canvas.getContext("2d");
  ctx.fillText(canvas.height, canvas.width / 2, canvas.height / 2);
}

paint();
new ResizeObserver(paint).observe(canvas);

.main {
  display: flex;
  flex-direction: column;
  height: 100%;
}

canvas {
  height: 0;
  flex-grow: 1;
}

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

<div class="main">
  <div class="header">
    Header
  </div>
  <canvas id="canvas" class="canvas"></canvas>
  <div class="footer">
    Footer
  </div>
</div>

btw. adding "overflow: hidden" to canvas also works – user3612643 Aug 25 '21 at 08:45 — user3612643, Aug 25 '21 at 08:45
@user3612643 but will it shrink correctly? – TYeung Aug 25 '21 at 08:49 — TYeung, Aug 25 '21 at 08:49

"flex: 1 1 0%" with a canvas child that adapts its size is not working properly

1 Answers1