嵌套的 flexbox 溢出屏幕

如何解决嵌套的 flexbox 溢出屏幕

我试图让图表只延伸到底部。我尝试使用带有 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

解决方法

尝试配置您的 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，默认情况下会将组件调整为浏览器视口的大小。

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

,

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