如何使用flexbox溢出全高内容？

Question

我的布局有全高侧边菜单和两个标签。在两个标签中的一个中，我有一个很大（固定高度）的内容溢出身体。我已在标签容器上设置overflow: auto。

我希望标签为全高，如果内容溢出，则滚动。它几乎不起作用，但第二个选项卡上的容器不包含所有选项卡。

我已经复制了此CodeSandbox上的错误：https://codesandbox.io/s/L84M9rOgD

我已尝试在标签容器上使用align-items: start，它会修复第二个标签但会将第一个标签打破为全高..

Answer 1

Try this demo

添加以下样式

.panelContent {
  flex: 1;
  padding: 30px 40px;
  display: flex;
  background: white;
  overflow-y: auto;
}
.panelIsActive {
  display: flex;
  overflow-y: auto;
}

Answer 2

Demo here

实现这一目标的关键是让整个容器具有真实的高度（使用height: 100vh或将其粘贴到您想要的position: absolute）。

之后，事情变得更容易，因为溢出将按预期运行。确保flex-grow不会压缩＆＃34;其他块，确保你有flex-shrink: 0设置为兄弟姐妹（参见演示，因为它觉得我的文字说明不是清晰的水晶）。