Charts is not fit to parent until screen is resized

Hi, I am using react-apexcharts and set height as fixed 300px. I thought the chart’s width should be set typed or fit to parent tag. But when I using react-apexcharts, it overs parent div.

Here is my chart code:

export default function ProjectStatusGraph() {
  const options = {
    chart: {
      toolbar: {
        show: false,
      },
      id: 'project-status-graph',
    },
    dataLabels: {
      enabled: false,
    },
    stroke: {
      curve: 'smooth',
    },
    xaxis: {
      type: 'datetime',
      labels: {
        show: true,
        showDuplicates: true,
        datetimeUTC: true,
      },
    },
  };

  const activatedProjectMock = projectUsageMock
    .map(r => [Number(r.date), r.projects.filter(p => p.activated).length])
    .sort((a, b) => a[0] - b[0]);
  const workingProjectMock = projectUsageMock
    .map(r => [Number(r.date), r.projects.filter(p => p.activated && p.usage > 10).length])
    .sort((a, b) => a[0] - b[0]);

  return (
    <Card title="Project Activated / Working" size="small">
      <ReactApexChart
        options={options}
        series={[
          {
            name: 'activated',
            data: activatedProjectMock,
          },
          {
            name: 'working',
            data: workingProjectMock,
          },
        ]}
        height={300}
        type="area"
      />
    </Card>
  );
}

And here is behavior:

The chart is overflowed until I adjust screen width or some re-rendering. Is it a bug or correct behavior of apexcharts which can be handled by developer?