Chart.js：如何设置图表的最小高度但仍保持纵横比？

Question

How can I set a fixed aspect ratio to the chart but also set a minimum height so that it behaves like below:

I have tried using react-chartjs-2 :

<div
  style={{
    minHeight: 300,
    paddingTop: "33.33333%",
  }}
>
  <Bar
    style={{ width: "100%", height: "100%" }}
    //data={...}
    options={{
      maintainAspectRatio: false,
    }}
  />
</div>

Answer 1

Solved it by adding an intermediate div between container and chart:

<div
  style={{
    minHeight: 300,
    paddingTop: "33.33333%",
    position: "relative",
  }}
>
  <div
    style={{
      position: "absolute",
      inset: 0,
    }}
  >
    <Bar
      style={{ width: "100%", height: "100%" }}
      //data={...}
      options={{
        maintainAspectRatio: false,
      }}
    />
  </div>
</div>