折叠手风琴时，div 高度不会调整

问题描述

我有两个相互叠加的图表，它们一直延伸到屏幕底部。第一个可通过 Accordion 折叠。

但是，如果我按顺序做以下两件事：

1. 让我的浏览器窗口变大
2. 然后，折叠 Accordion（即，最小化第一个图形）。

然后在第二个图形下方会有不需要的空白。

<Flex direction="column" height="calc(100vh)" className="flex-wrapper">
  <Box fontSize={["sm","md","lg","xl"]}>Font Size</Box>
  <Flex className="flex-wrapper0">
    <div>123456789010</div>
    <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>

这似乎是浏览器大小调整和 css 之间的一些交互问题？我想我需要在按下手风琴按钮时强制重新渲染 <ThreeDataPoint /> 以便它可以选择它应该使用的新高度。我想知道如何强制重新渲染？

这是代码和框：

https://codesandbox.io/s/elegant-fermat-bugv1?file=/src/index.tsx

以及应用网址：

https://bugv1.csb.app/

解决方法

正是因为这个 !important 标志在 css 文件中造成了问题：

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

将其注释掉后，它按预期工作。