chart.jsで描画しているRadarチャートが崩れてしまう

同じ構造のチャートがあり、上のチャートはレスポンシブだが、下のチャートはwidthが300px以下にならずに以下の写真のように崩れてしまう。

異なる点
・下のチャートはforEachでRailsのDBから取得したレコードを使って描画している点

上のチャート

<div class="col-xs-12 col-sm-6">
  <div class="chart-container" style="width: 100%;">
    <canvas id="averageRadarChart"></canvas>
  </div>
</div>

<script>
  var ctx = document.getElementById("averageRadarChart");

  var averageRadarChart = new Chart(ctx, {
      type: 'radar', 
      data: { 
          labels: ["ルックス", "スタイル", "演技", "知名度", "企画の幅", "カリスマ性", "作品の数", "オリジナリティ"],
          datasets: []
      },
      options: {
          responsive: true,
          legend:{
              display: false,
          },
          scale:{
              ticks:{
                  suggestedMin: 0,
                  suggestedMax: 5,
                  stepSize: 1,
              }
          },
          aspectRatio: 1,
      }
  });
</script>

下のチャート

<div>
  <p>
    <div class="star-rating ml-2" style="display: inline-block; position: relative; width: 5em; height: 1em; font-size: 17px;">
    <div class="star-rating-front" style="position: absolute; top: 0; left: 0; overflow: hidden; white-space: nowrap; color: #ff5f96; height: 25px; width: <%= review.overall*100/5 %>%">★★★★★</div>
    <div class="star-rating-back"style="color: #ccc;">★★★★★</div>
  </div>
  <%= l review.created_at, format: :short %> | <%= review.author %>（<%= review.age %> / <%= review.sex %>）
  </p>
</div>
<div class="row">
  <div class="col-xs-12 col-sm-4">
    <div class="chart-container" style="width: 100%;">
     <canvas id="detail_radar_charts_<%= review.id %>"></canvas>
    </div>
  </div>
  <div class="col-xs-12 col-sm-8">
    <p><%= review.comment %></p>
  </div>
</div>
<script>
  var chart_array = [];
  gon.reviews_id_array.forEach( function( value ) {
    var ctx = document.getElementById("detail_radar_charts_"+value);
    var x = new Chart(ctx, {
      type: 'radar', 
      data: { 
        labels: ["ルックス", "スタイル", "演技", "知名度", "企画の幅", "カリスマ性", "作品の数", "オリジナリティ"],
        datasets: [{
          label: '投稿者',
          data: gon.reviews_hash[value],
          backgroundColor: 'RGBA(225,95,150, 0.5)',
          borderColor: 'RGBA(225,95,150, 1)',
          borderWidth: 1,
          pointBackgroundColor: 'RGB(46,106,177)'
        },{
          label: '平均',
          data: gon.average_rader_array,
          backgroundColor: 'RGBA(15,135,156,0.1)',
          borderColor: 'RGBA(15,135,156,1)',
          borderWidth: 1,
          pointBackgroundColor: 'RGB(46,106,177)'
        }]
      },
      options: {
        responsive: true,
        legend:{
            position: 'bottom',
        },
        scale:{
          ticks:{
            suggestedMin: 0,
            suggestedMax: 5,
            stepSize: 1,
          }
        },
        aspectRatio: 1,
      }
    });
    chart_array.push( x );
  });
</script>