在 Material-UI 中恰好溢出一个网格项

Question

我正在使用 Material-UI 并尝试制作一个包含两个网格项的网格：

1. 几十个 ListItem 的列表。
2. 静态控制面板。

这是我开始使用的最小沙箱示例：https://codesandbox.io/s/material-ui-grid-center-vertically-v2-forked-cju60?file=/index.js

在我的理想世界中，我希望第 1 列滚动，第 2 列保持原位。也就是说，父 Grid 的高度将匹配绿色列的高度，而黄色列将溢出到匹配高度的滚动中。

不幸的是，我无法设置网格本身的高度（或最大高度）（使用 style={{maxHeight: "500px", overflow:"scroll"}} 之类的东西，因为这会导致两列滚动。此外，我无法为绿色列设置固定高度，因为用户可以在该列中动态添加和删除选择器。

我正在寻找的功能是否可行？

Answer 1

为了使滚动工作，您必须在父级或黄色网格上的某个地方有一个“固定”高度。否则浏览器不知道在哪里截断滚动条来显示。

一个简单的选择是在父级上设置height（100vh 或任何固定像素），然后让两个子级都采用父级高度的100%。

另一种选择是在黄色网格上有一个max-height（100vh，如下例所示）并让父级拥有height: fit-content，因此它与黄色网格和绿色网格的高度完全相同，display: block 应该会自动占用父级中的所有可用空间。

代码沙盒示例：https://codesandbox.io/s/material-ui-grid-center-vertically-v2-forked-26e75?file=/index.js