Responsive chart growing uncontrollably

问题

I have a vue component that implements vue-chartjs's HorizontalBar component that I render as a cell in a bootstrap-vue table. My desire is to have the chart maintain a fixed height but scale horizontally as the window grows/shrinks.

The chart plays nicely enough when the page is first loaded but grows uncontrollably on re-size to cover other elements on the page.

How do I make them properly responsive without them going where they shouldn't? I'd also like to make sure they actually take up the extent of the table cell they're in, rather than weirdly stopping a few pixels short.

Here's my relevant component code:

<script>
import { HorizontalBar } from "vue-chartjs";
import Constants from "../../services/Constants";

export default {
  name: "ResponseGraph",
  extends: HorizontalBar,
  props: { /* some props */ },
  data: () => ({
    chartData: {},
    options: {
      responsive: true,
      maintainAspectRatio: false,
      scales: {
        xAxes: [{ stacked: true, display: false }],
        yAxes: [{ stacked: true, display: false }]
      },
      legend: {
        display: false
      },
      tooltips: {
        enabled: false
      }
    }
  }),
  mounted() {
    this.chartData = {
      datasets: [
        // some data
      ]
    };
    this.renderChart(this.chartData, this.options);
  }
};
</script>

And how I'm using it inside of my table code:

      <template v-slot:cell(graph)="data">
        <response-graph
          :correct="data.item.correct"
          :incorrect="data.item.incorrect"
          :omitted="data.item.omitted"
          :height="20"
        />
      </template>

来源：https://stackoverflow.com/questions/59779252/responsive-chart-growing-uncontrollably