Chart.js で領域いっぱい使うようにリサイズしたい

窓をリサイズしたときにチャートキャンバスのサイズもリサイズしたいんですが
チャートを表示する領域を flex で確保してると自動でサイズがとれないみたいです

なのでリサイズしたときに手動でサイズをセットしたいんですが

$(window).resize(function() {
      cw = document.getElementById("main").getBoundingClientRect().width;
      ch = document.getElementById("main").getBoundingClientRect().height;
      console.log(cw + " " + ch);
      $('canvas').css('width', cw);
      $('canvas').css('height', ch);
});

とかいても

      $('canvas').attr('width', cw);
      $('canvas').attr('height', ch);

とかいても両方かいてもうまくいきません

    responsive: true,
    maintainAspectRatio: false,

あたりをセットしてもかわらず

サイズ自体はとれてるのでどうかけばリサイズできるんでしょうか

もっと根本的に flex で領域を指定しても chart.js が自動で全領域を使うようにはできないでしょうか
あるいは flex を使わずに可変サイズのヘッダやサイドバーを覗いた領域を確保することはできますか？

追記：

canvas を <div class="chart-container"> でかこんで
コンテナにサイズを指定してみましたがあまりかわりません

そもそも拡大縮小以前に縦をめいっぱい使うことすらできてなくて
'maintainAspectRatio: false' をしても表示されるグラフは常に同じ形なんですが、
Chart.js では画面をぴったり使うように正方形や縦長にしたりはできないのでしょうか…

テストコードは以下（グラフは公式のサンプル）

<style>
body {
  display:  flex;
  flex-direction: column;
  align-content: stretch;
}
.container-fluid {
  flex-grow:  1;
}
.row {
  height:  100%;
  display:  flex;
  align-content: stretch;
  background: #fee;
}
.sidebar {
  background: #efe;
}
main {
  flex-grow:  1;
}
</style>

<body>
<header>
  ヘッダ
</header>
<div class="container-fluid">
  <div class="row">
    <nav class="sidebar">
      サイド
    </nav>
    <main id="main">
      <div class="chart-container">
        <canvas id="myChart"></canvas>
      </div>
    </main>
  </div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js"></script>
<script>

$(window).resize(function() {
      cw = document.getElementById("main").getBoundingClientRect().width;
      ch = document.getElementById("main").getBoundingClientRect().height;
      console.log(cw + " " + ch);
      $('.chart-container').attr('width', cw);
      $('.chart-container').attr('height', ch);
      $('.chart-container').css('width', cw);
      $('.chart-container').css('height', ch);
});


var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
        datasets: [{
            label: '# of Votes',
            data: [12, 19, 3, 5, 2, 3],
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
                'rgba(75, 192, 192, 0.2)',
                'rgba(153, 102, 255, 0.2)',
                'rgba(255, 159, 64, 0.2)'
            ],
            borderColor: [
                'rgba(255,99,132,1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)',
                'rgba(255, 159, 64, 1)'
            ],
            borderWidth: 1
        }]
    },
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero:true
                }
            }]
        }
    }
});
</script>

</html>