How to get Accordion item to change size with flex box?

I have a two charts on my page. Together, they take up the entire screen height through Flex (a css flexbox). The first chart is collapsible via an Accordion.

How we can make the first chart fill up 30% of the screen height, and the second chart fill up the remaining ~70%?

I was able to do this successfully when these two charts are the only things on the page:

// This works well.
<Flex direction="column" height="100vh">
  <Accordion allowToggle>
    <AccordionItem>
      <h2>
        <AccordionButton
          h={0}
          borderRadius="md"
          borderWidth="0px"
          _focus=
        >
          <Box
            textAlign="left"
            h={3}
            _focus=
          ></Box>
          <AccordionIcon />
        </AccordionButton>
      </h2>
      <AccordionPanel p="0">
        <Box height="30vh">
          <ThreeDataPoint />
        </Box>
      </AccordionPanel>
    </AccordionItem>
  </Accordion>
  <Box flex="1">
    <ThreeDataPoint />
  </Box>
</Flex>

However, if I combine a row and column flex box together, it doesn't work. The second chart overflows the screen's height.

Here's the CODESANDBOX

And here's a screenshot:

from How to get Accordion item to change size with flex box?