JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css">
if chart is the only one element in div, it won't be responsive
<div class="tile is-ancestor">
  <div class="tile is-vertical">
    <div class="tile is-parent">
      <div class="tile is-child box">
        <canvas id="chart"></canvas>
      </div>
    </div>
    <div class="tile is-parent">    
      <div class="tile is-child box">
        another block
      </div>
    </div>
    it still not responsive, it grow, but not shrink
    <div class="tile is-parent">
      <div class="tile is-child box">
        <canvas id="chart2"></canvas>
      </div>
    </div>    
  </div>
</div>

CSS

.tile.is-child.box {
  min-width: 0;
}

JavaScript

const make = ({
  id,
  responsive = false
}) => {
  const barChartElement = document.getElementById(id);
  const barChart = new Chart(barChartElement, {
    type: 'horizontalBar',
    responsive,
    options: {
      legend: {
        display: false
      },
      scales: {
        yAxes: [{
          ticks: {
            beginAtZero: true,
          },
          barPercentage: 0.3
        }]
      },
      elements: {
        rectangle: {
          borderSkipped: 'left',
        }
      }
    },
    data: {
      legend: false,
      labels: [],
      datasets: [{
        data: [],
      }]
    }
  });

  setInterval(function() {
    var random = Array.from({
      length: 3
    }, () => Math.floor(Math.random() * 40));

    var sorted = random.sort(function(a, b) {
      return b - a;
    });

    barChart.data.labels = sorted;
    barChart.data.datasets[0].data = sorted;
    barChart.update();
  }, 2000);
}

make({
  id: 'chart'
})
make({
  id: 'chart2',
  responsive: true
})