Material-ui Grid 项目高度超过其容器的高度

Question

我有一个 Grid 容器，其中包含 2 个 Grid 项目。我已将容器和第二个 Grid 项目的高度设置为 100%。第二个 Grid 项的高度超过了容器的高度，出现了一个滚动条。

如果有帮助，这里是代码。

function App() {
  return (
    <Grid container style={{height: '100%'}}>
      <Grid item xs={12} style={{border: 'solid 1px'}}>
        Header
      </Grid>

      <Grid item xs={12} style={{height: '100%', border: 'solid 1px'}}>
        Content
      </Grid>
    </Grid>
  )
}

https://codesandbox.io/s/8k0xy60nx2

如何使第二个 Grid 项目占据其容器的剩余高度并且不超过它？我在这里错过了什么？

谢谢。

Answer 1

用direction="column"试试这个，

<Grid
  container
  direction="column"
  style={{ border: "solid 5px", height: "100%" }}
>
  <Grid
    item
    style={{ border: "solid 1px", backgroundColor: "yellow" }}
  >
    Header
  </Grid>

  <Grid
    item
    xs
    style={{ border: "solid 1px", backgroundColor: "red" }}
  >
    Content
  </Grid>
</Grid>

Edited Sandbox

希望这会有所帮助...

Answer 2

请注意，父容器溢出了第一项的高度。这是因为您为第二个项目设置了 100% 的高度，但实际上您的父项中有 2 个项目。如果您不想要滚动条，项目的总和需要等于或更低。尝试将第一项的高度设置为 10%，将第二项的高度设置为 90%。滚动将消失

Answer 3

伙计！这很烦人。

I hacked on the codesandbox a bit to make it closer to my view on this problem.

MDN / Web tech / CSS / max-height 表示如果提供百分比，则 将最大高度定义为包含块高度的百分比。

我花了一个小时在 Chrome 开发工具样式调试器中的 dom 树上上下走动，你可以看到朝向根的 vh 大小的元素是预期高度的位置，然后 Mui Grid 显示为 max-height 100% , height: 3319px