Flex box of two charts is overflowing screen

Question

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={{ boxShadow: "none" }}
        >
          <Box
            textAlign="left"
            h={3}
            _focus={{ boxShadow: "none" }}
          ></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:

Answer 1

I made some changes to your code, trying to achieve a somewhat satisfying result, which keeps both charts in that 100vh max height and avoids scrolling.

The height of the second chart will be automatic, filling as much space as available depending on whether or not the first one is collapsed.

Down here is some styling I added in your styles.css file (right under your .test class):

.flex-wrapper {
  display: grid !important;
  grid-auto-flow: column;
  grid-auto-columns: max-content auto;
  gap: 15px;
  padding: 15px;
  max-height: 100%;
  width: 100%;
}

.accordion-box-container {
  display: grid !important;
  grid-template-rows: min-content auto;
  gap: 15px;
  overflow-y: hidden;
  width: 100%;
}

.accordion-wrapper {
  height: 100%;
}

.accordion-title {
  display: flex;
  align-items: center;
  padding: 5px 0;
  height: auto;
}

.accordion-button {
  width: min-content !important;
  margin-left: 5px;
}

.graph-wrapper {
  height: 100%;
}

.graph-wrapper div {
  height: 100% !important;
}

Meanwhile, I removed some of the bootstrap classes from your jsx in index.tsx and added the css classes above to the appropriate components:

render(
  <ChakraProvider>
    <>
      <Flex direction="column" height="100vh" className="flex-wrapper">
        <div>123456789010</div>
        <Flex>
          <Box className="accordion-box-container">
            <Accordion className="accordion-wrapper" allowToggle>
              <AccordionItem>
                <h2 className="accordion-title">
                  <AccordionButton
                    className="accordion-button"
                    borderRadius="md"
                    borderWidth="0px"
                    _focus={{ boxShadow: "none" }}
                  >
                    <Box
                      textAlign="left"
                      h={3}
                      _focus={{ boxShadow: "none" }}
                    ></Box>
                    <AccordionIcon />
                  </AccordionButton>
                </h2>
                <AccordionPanel p="0">
                  <Box height="30vh">
                    <ThreeDataPoint />
                  </Box>
                </AccordionPanel>
              </AccordionItem>
            </Accordion>
            <div className="graph-wrapper">
              <ThreeDataPoint />
            </div>
          </Box>
        </Flex>
      </Flex>
    </>
  </ChakraProvider>,
  rootElement
);

Finally, I had to remove your restriction for size in BasicLineSeries.tsx which would enforce the min height to both charts making it impossible to adjust their height after rendering (only changed the export statement):

export default withSize()(
  withDeviceRatio()(BasicLineSeries)
);

Please try to test this out on your own and let me know if this is somewhat satisfying to your requirements. If something else is needed, comment it and I'll do my best to adjust my solution accordingly.