adjust div and the canvas inside it (with chart.js) to match parent height
<p>I'm a beginner to CSS and I'm trying to create a page with some tables and charts (using chart.js).
My goal is to have a div filling 100% of the width of the page and inside of it two divs:</p>

<ol>
<li><p>A div with a table near a chart - 66% of the screen</p>

<p>1a. Table will be 75% of div</p>

<p>1b. Chart will take the rest 25% of the div</p></li>
<li><p>A div with a chart - 33 % </p></li>
</ol>

<p>or to make it more visual: something like this:
<a href="https://i.stack.imgur.com/RO7le.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/RO7le.png" alt="enter image description here"></a></p>

<p>The purple is the main div, the blues are the two divs (66% and 33%) inside the main div and the reds (light and dark reds) are the div table and the div contain the 25% chart. The yellows are the canvas for the charts.</p>

<p>In order to get that I wrote something like this (I'm ignoring other style attributes shown in the image [like padding, margin, etc.] for simplicity) :</p>

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

<p>Like I expected, the purple main div size was determined by the left blue div size that was determined by the table div. What did not happen like I expected is the divs containing the charts, did not stretch to the full height their parent div but instead got this weird ratio:</p>

<p><a href="https://i.stack.imgur.com/tDIz1.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/tDIz1.png" alt="enter image description here"></a></p>

<p>The only way I could change the size of the chart divs (like in the first picture) was by setting fixed size to the canvas: <code>&lt;canvas id="pie" height="300"&gt;</code> (Which is not good enough because I want it to be aligned for every screen. Trying to set the canvas style attribute did not change the canvas at all. </p>

<p>I assume I'm missing something very basic here but even after reading these answers:</p>

<p><a href="https://stackoverflow.com/questions/10214873/make-canvas-as-wide-and-as-high-as-parent">make canvas as wide and as high as parent</a></p>

<p><a href="https://stackoverflow.com/questions/8624268/html5-canvas-resize-to-parent">HTML5 canvas resize to parent</a></p>

<p>I still wasn't able to fix it.</p>