嵌套的 flexbox 溢出屏幕

Question

我试图让图表仅延伸到底部。我尝试使用带有height="100vh" 的列弹性框。但是，它溢出了屏幕。

<Flex direction="column" height="100vh">
  <Flex flex="1" direction="row">
    <div>123456789010 </div>
    <Box flex="1">
      <div>| 123</div>
      <div>| 123</div>
      <div>| 123</div>
      <div>| 123</div>
      <div>| 123</div>
      <ThreeDataPoint />
    </Box>
  </Flex>
</Flex>

我注意到，如果图表上方没有任何文字，它会起作用。但是，当我在上面放任何东西时，它会导致它溢出。这似乎是因为 flexbox 没有注意到上面有任何东西，并且正在调整图表的大小，就好像那里什么都没有一样。

会发生什么？

CODESANDBOX HERE

Answer 1

尝试配置 react-financial-charts 组件的 props。

react-financial-charts 包的自动调整大小行为似乎导致了这个问题。

在浏览器中检查页面时，您会注意到您的 .react-financial-charts 元素有一个硬编码的 height 等于浏览器视口的高度。我在 Chrome 中使用React Developer Tools 查看了这个组件，它似乎包含可能导致此问题的AutoSizer 组件。

您以这种方式导出BasicLineSeries 组件：

export default withSize({ style: { minHeight: 0 } })(
  withDeviceRatio()(BasicLineSeries)
);

所以我的猜测是withSize 创建AutoSizer，默认情况下会将组件调整为浏览器视口的大小。

然后解决方案是检查此包的文档并找出您需要使用哪些道具来告诉它不要自动调整大小。

Answer 2

一种解决方案是简单地将 overflow="hidden" 属性添加到您的 Flex 组件中，如下所示：<Flex direction="column" height="100vh" overflow="hidden">