折叠手风琴时 div 高度不调整答案

【问题标题】：div height doesn't adjust when Accordion is collapsed折叠手风琴时 div 高度不调整
【发布时间】：2021-10-06 08:54:09
【问题描述】：

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

但是，如果我依次做以下两件事：

让我的浏览器窗口更大
然后，折叠 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/

【问题讨论】：

标签： javascript css reactjs flexbox chakra-ui

【解决方案1】：

正是因为这个 !important 标志导致 css 文件出现问题：

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

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

【讨论】：