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

Question

我希望在 React 中使用 Material UI 制作多个滚动列。我有一种在引导程序中使用 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、body、#root），然后创建了两个grid-container高度为 100% 的类 - AppBar 高度和grid-column高度为 100% 并且溢出-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)因为这需要我事先知道元素高度。我将有一些页面，我想在滚动区域上方放置一些内容，这些内容将具有动态的高内容。

Answer 1

我决心重新创建我过去在引导程序中的做法（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（后者用于防止滚动上方的元素被压缩）

Answer 2

2020 更新

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

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