调整div和其中的画布（使用chart.js）以匹配父高度

Question

我是CSS的初学者，我正在尝试创建一个包含一些表格和图表的页面（使用chart.js）。 我的目标是让一个div填充100％的页面宽度，并在其中填充两个div：

1. 在图表附近有一张桌子的div - 占屏幕的66％

   1a上。表将是div的75％

   1b中。图表将占剩余25％的div

2. 带有图表的div - 33％

或使其更具视觉效果：如下所示：

紫色是主要的div，蓝色是主div内的两个div（66％和33％），红色（浅红色和深红色）是div表，div包含25％的图表。黄色是图表的画布。

为了得到我写的这样的东西（为了简单起见，我忽略了图像中显示的其他样式属性[如填充，边距等]）：

<div id="mainPurple" style="width: 100%;">
    <div id="leftBlue" style="width: 66%;">
        <div id="table" style="width: 75%;">
            <table>...</table>
        </div>
        <div id="donutContainer" style="width: 25%; height: 100%;">
            <canvas id="donutChart"></canvas>
        </div>
    </div>
    <div id="rightBlue" style="width: 33%; height: 100%">
        <canvas id="pie"></canvas>
    </div>
</div>

就像我预期的那样，紫色的主要div大小是由表格div确定的左蓝色div大小决定的。像我预期的那样没有发生的是包含图表的div，没有延伸到他们的父div的全高，而是得到了这个奇怪的比例：



我可以更改图表div大小的唯一方法（如第一张图片中所示）是通过将固定大小设置为画布：<canvas id="pie" height="300">（这不够好，因为我希望它能够对齐每个屏幕。尝试设置画布样式属性根本不会改变画布。

我认为我在这里缺少一些非常基本的东西，但即使在阅读了这些答案之后：

make canvas as wide and as high as parent

HTML5 canvas resize to parent

我仍然无法修复它。