表示グラフが親要素からはみ出てしまう

Chart.jsでグラフを描画しましたが、左半分の親要素内に収まりません。
親要素に合わせてサイズ変更するようにしたのですが、親要素からはみ出てしまいました。
どうすれば収まるのでしょうか？

html
1<!DOCTYPE html>
2<html lang="en">
3  <head>
4    <title>Hello world!</title>
5    <link rel="stylesheet" type="text/css" href="index.css">
6  </head>
7  <body>
8    <meta charset="utf-8"/>
9    <div class="grid-container">
10        <div id="right"></div>
11        <div id="left">
12            <div class="chart-container">
13                <canvas id="my-chart"></canvas>
14            </div>
15        </div>
16    </div>
17    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>
18    <script type="text/javascript" src="index.js"></script>
19  </body>
20</html>

javascript
1window.onload = function() {
2  let data = {
3      datasets: [{
4        data: [10, 10, 10]}],
5      labels: [ 'うさぎ', 'いぬ', 'たぬき' ],
6  };
7  new Chart('my-chart', {
8      type: 'pie',
9      data: data,
10      options: {
11        maintainAspectRatio: false,
12      }
13  });
14}
15

css
1.grid-container {
2    display: grid;
3    grid-template-columns: 1fr 1fr;
4    grid-template-rows: 1fr;
5    grid-template-areas: "left right";
6    height: 100vh;
7}
8
9#right {
10    grid-area: right;
11    background: pink;
12    width: 50vw;
13}
14
15#left {
16    grid-area: left;
17    background: aquamarine;
18    padding: 20px;
19    width: 50vw;
20}
21
22.chart-container {
23    position: relative;
24    height: 80vh;
25    width: 80vw;
26}