具有独立滚动列的材质 UI 网格

Question

我正在寻找使用 React 中的 Material UI 制作多个滚动列。我有一种方法可以在 bootstrap 中使用 flex 来完成它，但我无法将其翻译过来。我整理了一个 hacky 方法的演示，它需要知道您要滚动的内容上方的内容大小（在本例中为 AppBar）

https://codesandbox.io/s/pmly895mm

 html,
body {
  margin: 0;
  height: 100%;
}

#root {
  height: 100%;
}

.grid-container {
  height: calc(100% - 64px);
}

.grid-column {
  height: 100%;
  overflow-y: auto;
}

在此演示中，我将所有高度设置为 100%（html、正文、#root），然后创建两个类 grid-container 高度为 100% - AppBar 高度和 grid-column 高度为 100%，overflow-y 为 auto。

在 Bootstrap 中，我会将这些类分别应用于 row 和 column 元素

.flex-section {
  flex-grow: 1;

  display: flex;
  flex-direction: column;

  min-height: 0;
}

.flex-col-scroll {
  flex-grow: 1;

  overflow: auto;

  min-height: 100%;
}

元素上方的内容无关紧要，因为 flex 会处理高度。

具体来说，我希望避免必须执行 height: calc(100% - 64px) 因为这需要我事先知道元素的高度。我将有一些页面，我想将一些内容放在滚动区域上方，这些内容将具有动态高的内容。

原文由 AKrush95 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

在我决定重新创建我过去在 bootstrap ( https://jsfiddle.net/aq9Laaew/226591/ ) 中的做法时，我实际上也能够让它在 Material UI 中工作。由于我无法在网上找到针对此特定用例（React / Material UI 可滚动列）的任何类型的示例，希望这会对其他人有所帮助。

这是示例： https ://codesandbox.io/s/z24wl3n58m

 html,
body {
  margin: 0;
  height: 100%;
}

#root {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.flex-section {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.flex-col-scroll {
  flex-grow: 1;
  overflow: auto;
  min-height: 100%;
}

.flex-no-shrink {
  flex-shrink: 0;
}

我缺少的是在根上设置 flex。一旦我们这样做了，那么我们就可以利用 flex-section ， flex-col-scroll 和 flex-no-shrink （后者用于防止上面的元素滚动）

原文由 AKrush95 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

2020年更新

FWIW 我只是能够将这两个样式属性添加到 Box 组件以实现可滚动 <div> 列：

 <Box style={{maxHeight: '100vh', overflow: 'auto'}}>...</Box>

原文由 Davis Jones 发布，翻译遵循 CC BY-SA 4.0 许可协议