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:
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>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>