React js 材质 ui - 两个 div 50% 高度答案

【问题标题】：React js material ui - two div 50% heightReact js 材质 ui - 两个 div 50% 高度
【发布时间】：2022-01-23 13:54:26
【问题描述】：

我正在使用 react JS 中的 Material UI 模板。

我需要创建一个 div（或 MUI 中的网格）100% 高度的容器，其中包含两个高度为 50% 的 div（或网格）：如果内部内容高于 50%，则需要滚动。

我也尝试过部分，但我不知道该怎么做。

我想出的是（它只是正确的列）：

<Grid
        container
        direction="column"
        justifyContent="space-between"
        style={{ height: "100%" }}
      >
    <Grid item style={{ background: "red", height: "50%", overflowY: "auto" }} >
        <h1>OKKK</h1>
    </Grid>
    <Grid item style={{ background: "blue", height: "50%", overflowY: "auto" }} >
        <h1>OKKK</h1>
    </Grid>
</Grid>

结果是：

似乎是正确的，但是如果我将内容添加到第一个 div 高度保持不变，我可以看到滚动条，但是如果我将内容添加到第二个 div，第一个 div 太高，而不是总高度的 50% .

我该如何解决这个问题？

【问题讨论】：

将 min-height:0 添加到两个元素
@TemaniAfif 添加到内部元素（红色和蓝色）中，没有任何变化

标签： css reactjs material-ui

【解决方案1】：

尝试在您的父容器上添加style={{ height: "100vh" }}。那应该行得通。为了更好地理解原因，看看这个解释得很好的答案http://stackoverflow.com/a/31728799/3597276

【讨论】：

我做了这样的事情，但 100vh 不正确。我必须投入 100%
嗨@Jack，我创建了一个sandbox 来演示。您可以使用 100% 高度，但是您需要确保它一直设置到层次结构的顶部，到达 body 和 html（如我之前提到的链接中所述）。

【解决方案2】：

您可以在 Grid 中使用 Box 组件： <Box height="100vh"></Box>

【讨论】：