Javascript 是否可以拉伸画布以填充大小为display:flex的div？

我有这样一个DOM：

<div id="container">
    <header>THIS IS MY HEADER</header>
    <div id="content">
        <div>
            <canvas id="canvas" />
        </div>
    </div>
    <footer>THIS IS MY FOOTER</footer>
</div>

这会产生如下结果：

但我无法对画布进行尺寸标注以正确填充适当的空间

如果我运行这个：

context = document.getElementById('canvas').getContext("2d");

var r = context.canvas.parentElement.getBoundingClientRect();
context.canvas.width = r.width;
context.canvas.height = r.height;

context.fillStyle="red";
context.fillRect(0, 0, context.canvas.width, context.canvas.height);

调用

context.canvas.parentElement.getBoundingClientRect（）

返回整个

的维度（即使

parentElement

是通过flexbox调整大小的

），结果如下：

如您所见，将

的尺寸设置得太大似乎会破坏

flexbox

并产生滚动条等。我可以理解为什么会发生这种情况，但我无法确定如何获得正确的尺寸以发送到画布

编辑

---

我已经更新了示例以包含缺少的

。此外，一旦我解决了这个问题，我需要能够在2或3张画布之间平均分配空间。同样，如果根据

flexbox

设置

display:block

到

canvas

元素的规则调整大小后，我可以获得每个画布父对象的尺寸，那么这将很容易做到

或

位置：绝对


var canvas=document.getElementById（'canvas'）；
var context=canvas.getContext（“2d”）；
var r=canvas.parentElement.getBoundingClientRect（）；
canvas.width=r.width；
canvas.height=r.height；
context.fillStyle=“红色”；
context.fillRect（0,0，canvas.width，canvas.height）
*{
填充：0；
保证金：0；
}
#容器{
显示器：flex；
弯曲方向：立柱；
最小高度：100vh；
}
#内容{
弹性：1；
背景：绿色；
}
帆布{
显示：块；
}

这是我的头球
这是我的页脚
您发现错误了吗？嗯。。。没有，没有错误。只需对画布进行尺寸标注，以占据flexbox内部
内容
div提供的100%空间（即：灰色页眉和页脚之间的空间）。
context = document.getElementById('canvas').getContext("2d");

var r = context.canvas.parentElement.getBoundingClientRect();
context.canvas.width = r.width;
context.canvas.height = r.height;

context.fillStyle="red";
context.fillRect(0, 0, context.canvas.width, context.canvas.height);