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

【问题标题】：How to overflow a full height content with flexbox?如何使用 flexbox 溢出全高内容？
【发布时间】：2017-07-31 14:19:05
【问题描述】：

我有一个带有全高侧菜单和两个选项卡的布局。在两个选项卡之一中，我有一个非常大（固定高度）的内容溢出了正文。我在标签容器上设置了overflow: auto。

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

我已在此 CodeSandbox 上重现了该错误：https://codesandbox.io/s/L84M9rOgD

我尝试在标签容器上使用align-items: start，它修复了第二个标签但破坏了第一个标签的全高..

【问题讨论】：

您是否尝试将 overflow: auto 添加到 div .flex 中？
它使绿色 div 滚动，但这不是我想要的。我希望整个容器滚动。

标签： css flexbox

【解决方案1】：

Try this demo

添加以下样式

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

【讨论】：

感谢您的回答，不幸的是，我希望整个容器滚动，而不仅仅是标签内容。在我的真实应用中，我在标签上方有一个内容，我也需要它来滚动。

【解决方案2】：

Demo here

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

之后，事情变得更容易了，因为溢出将按预期运行。为确保flex-grow 不会“压缩”其他块，请确保您已将flex-shrink: 0 设置为同级（参见演示，因为感觉我的文字解释不是清晰如水晶）。 p>

【讨论】：