我使用ChakraUI的卡，按钮和选择，和Chartjs的线图，我的问题是，图表是不适合卡正确，你可以看到在图像中，可能是由于这一事实，即框被返回的组件有一个Flex的按钮和选择除了图表本身，因为图表填充框，而忽略了Flex，我想让图表填充卡片的剩余高度，卡片在父组件中而不是在这个子组件中，因为卡片组件是可调整大小的，设置固定高度将是一个问题。
WeeklyScoreGraph.js

const options = {
maintainAspectRatio: false,
responsive: true,
scales: {
  y: {
    max:
      Math.max(...score_logs.map((score_log) => score_log.new_score)) + 5,
    grid: {
      display: false,
    },
  },
  x: {
    grid: {
      display: false,
    },
  },
},
plugins: {
  zoom: {
    pan: {
      enabled: true,
      mode: "x",
      modifierKey: "ctrl",
    },
    zoom: {
      drag: {
        enabled: true,
      },
      mode: "x",
    },
  },
  legend: {
    display: false,
  },
  title: {
    display: true,
    text: "Histórico do Score",
  },
  datalabels: {
    anchor: "end",
    align: "end",
  },
},
segment: {
  borderColor: function (context) {
    const chart = context.chart;
    const { ctx, chartArea } = chart;

    if (!chartArea) {
      // This case happens on initial chart load
      return;
    }
    return getGradient(ctx, chartArea);
  },

  //ctx.chart.data.datasets[ctx.p0DataIndex] > 0 ? 'Green' : 'Red')
}};

return (
<Box h="100%" w="100%">
  <Flex m="10px">
    <Button onClick={handleResetZoom}>Reset Zoom</Button>
    <Spacer />
    <Select
      border="1px"
      w={{ base: "50%", md: "25%", lg: "25%" }}
      value={num_days}
      onChange={(e) => setNumDays(Number(e.target.value))}
    >
      <option value={7}>Últimos 7 dias</option>
      <option value={15}>Últimos 15 dias</option>
      <option value={30}>Últimos 30 dias</option>
      <option value={90}>Últimos 90 dias</option>
      <option value={180}>Últimos 180 dias</option>
      <option value={365}>Últimos 365 dias</option>
    </Select>
  </Flex>
  <Box h="100%">
    <Chart ref={chartRef} type="line" options={options} data={data} />
  </Box>
</Box>);

cve-dashboard.js

<Card key={l.i}>
      <Button w="5px" h="15px" onClick={() => onPutItem(l)}>
        &times;
      </Button>
      <Componentes data={l.component_name} /> {/* Component being called dynamically */}
 </Card>