Nuxt.js+Chart.jsを用いて作成したレーダーチャートの大きさを、CSSで変更して横並びにしたい。

前提・実現したいこと

現在、Nuxt.js+Chart.js でレーダーチャートを作成しているのですが、display: flex; を用いるとチャートコンポーネントを横並びにできるのですが、リロードをするとチャートコンポーネントの大きさが、指定した大きさから変わってしまうため、解決したいです。

###発生している問題・エラーメッセージ

height: 250px; width: 250px;を指定しているのですが、chromeのdeveloperツールを使用すると、以下のように表示されてしまいます。

<canvas id="radar-chart" width="320" height="320" style="display: block; height: 400px; width: 400px;" class="chartjs-render-monitor"></canvas>

該当のソースコード

component
1<script>
2import { Radar } from 'vue-chartjs'
3
4export default {
5  name: 'RadarChart',
6  extends: Radar,
7  data () {
8    return {
9      data: {
10        labels: ['数学', '英語', '理科', '国語', '社会'], // 軸名
11        datasets: [
12          {
13            backgroundColor: 'rgba(255, 204, 0, 0.4)', // 塗り潰しの色
14            borderColor: 'rgba(255, 204, 0, 1)', // 線の色
15            pointBackgroundColor: 'rgba(255, 204, 0, 1)', // 点の塗り潰しの色
16            pointBorderColor: '#fff', // 点の境界線の色
17            pointHoverBackgroundColor: '#fff', // マウスオーバー時の点の背景色
18            pointHoverBorderColor: 'rgba(255, 204, 0, 1)', // マウスオーバー時の点の境界線の色
19            data: [100, 90, 80, 70, 60],
20            fill: true,
21            pointHitRadius: 20,
22            pointStyle: 'circle',
23            pointRadius: 1
24          }
25        ]
26      },
27      options: {
28        legend: {
29          display: false,
30          labels: {
31            fontSize: 15
32          }
33        },
34        scale: {
35          pointLabels: {
36            fontSize: 15
37          },
38          ticks: {
39            min: 0,
40            max: 100,
41            stepSize: 20,
42            fontSize: 0
43          }
44        }
45      }
46    }
47  },
48  mounted () {
49    this.renderChart(this.data, this.options)
50  },
51  responsive: true,
52  maintainAspectRatio: false
53}
54
55</script>
56

該当のソースコード

indexvue
1<template>
2  <div class="wrapper">
3    <div class="element">
4      <Radar />
5    </div>
6    <div class="element">
7      <Radar />
8    </div>
9    <div class="element">
10      <Radar />
11    </div>
12    <div class="element">
13      <Radar />
14    </div>
15  </div>
16</template>
17
18<script>
19import Radar from '~/components/Radar.vue'
20
21export default {
22  components: {
23    Radar
24  }
25}
26</script>
27
28<style>
29.wrapper {
30  display: flex;
31  height: 250px;
32  width: 250px;
33}
34</style>
35

試したこと

これらのサイトを参考にしましたが、チャートの大きさが無駄に大きくなり、他のサイトを調べましたが参考になりそうな良いサイトが見つけられませんでした。。

要素を横並びにするならflex boxしかない！

floatより辛くない「flexbox」でざっくりレイアウト

補足情報（FW/ツールのバージョンなど）

packagejson
1{
2  "name": "",
3  "version": "1.0.0",
4  "description": "My epic Nuxt.js project",
5  "author": "",
6  "private": true,
7  "scripts": {
8    "dev": "nuxt",
9    "build": "nuxt build",
10    "start": "nuxt start",
11    "generate": "nuxt generate",
12    "lint": "eslint --ext .js,.vue --ignore-path .gitignore ."
13  },
14  "dependencies": {
15    "@nuxtjs/axios": "^5.8.0",
16    "chart.js": "^2.9.3",
17    "eslint-plugin-import": "^2.19.1",
18    "firebase": "^7.6.0",
19    "jquery": "3.4.1",
20    "nuxt": "^2.10.2",
21    "vue-chartjs": "^3.5.0",
22    "yarn": "^1.21.1"
23  },
24  "devDependencies": {
25    "@nuxtjs/eslint-config": "^2.0.0",
26    "@nuxtjs/eslint-module": "^1.1.0",
27    "@nuxtjs/vuetify": "^1.9.1",
28    "babel-eslint": "^10.0.3",
29    "eslint": "^6.7.2",
30    "eslint-plugin-nuxt": ">=0.5.0"
31  }
32}
33