Canvas stretching when using column-count - html

Question

I am using chart.js and I have two pie charts and a bar chart which I would like to display in a single row. I want the bar chart to be larger than the individual pie charts, so I did the following.
To get the two pie charts to fit into a single column I used column-count.
Here is the CSS which I am using
.container {
display: flex;
}
.row {
display: flex;
flex-direction: row;
flex-wrap: wrap;
width: 100%;
margin-bottom: 30px;
}
.column {
display: flex;
flex-direction: column;
flex-basis: 100%;
flex: 1;
align-self: stretch;
margin-right: 10px;
margin-left: 10px;
}
.container div {
flex: 1;
}
canvas {
max-width: 100%;
display: flex;
}
.pie {
column-count: 2;
max-height: 93%;
}
And the HTML
<div class="container">
<div class="row">
<div class="pie">
<canvas baseChart [data]="pieFeeChartData" [type]="pieChartType"
[options]="pieFeeChartOptions">
</canvas>
<canvas baseChart [data]="pieFooChartData" [type]="pieChartType"
[options]="pieFooChartOptions">
</canvas>
</div>
<div class="column">
<canvas baseChart [data]="barBlahChartData"
[options]="barBlahChartOptions" [type]="barChartType">
</canvas>
</div>
</div>
</div>
My best solution is to set max-height in .pie to 93%. It does give me close to what I want, but it is not exact and the formatting is inconsistent with smaller window sizes. It is not bad, but I am hoping to find a more precise solution without using a hard coded value. I have tried a lot of different flex settings, but I want to keep these CSS settings consistent throughout the project as much as possible, so that is not ideal either.
Here is a screenshot of what is happening when I DONT set max-height: 93%;

Answer 1

You could greatly simplify this using grid. It will give you more predictable results and it will be more reusable in your project and it will be a lot easier to reason about as your project grows.
Also, notice how the canvas height value uses !important to override the fixed values of the height of your chart that are applied as inline styles by Chart.js.
.container {
width: 90%;
margin: auto;
}
.row {
display: grid;
/*
A standard 12 column grid can be evenly
divided into quarters and thirds.
*/
grid-template-columns: repeat(12, 1fr);
}
.col-full {
grid-column: span 12;
}
.col-half {
grid-column: span 6;
}
.col-quarter {
grid-column: span 3;
}
/* ✨ Magic ✨ */
canvas {
max-width: 100%;
height: 100% !important;
}
And now the HTML:
<div class="container">
<div class="row">
<div class="col-quarter">
<canvas id="pieChart1"></canvas>
</div>
<div class="col-quarter">
<canvas id="pieChart2"></canvas>
</div>
<div class="col-half">
<canvas id="barChart"></canvas>
</div>
</div>
</div>
The result: