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

我有一个全高度的侧面菜单和两个选项卡的布局。在两个标签中的一个中，我有一个非常大的（固定高度）内容，它溢出了身体。我已经在标签容器上设置了overflow: auto。如何使用flexbox溢出全高内容？

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

我转载这个CodeSandbox的bug：https://codesandbox.io/s/L84M9rOgD

我试着标签的容器上使用align-items: start，它修复了第二个选项卡，但打破第一个是全高..

来源

2017-07-31 Kerumen

您是否尝试在div'.flex'中添加'overflow：auto'？ – sol

它使绿色div滚动，但它不是我想要的。我希望整个容器滚动。 – Kerumen

Try this demo

添加下面的风格

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

来源

2017-08-01 08:31:15

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

Demo here

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

之后，事情变得更容易，因为溢出将按预期行事。为确保flex-grow不会“压缩”其他块，请确保已将flex-shrink: 0设置为兄弟（参见demo，因为它认为我的文本解释不是明确为晶体）。

来源

2017-08-05 16:48:55 meriadec

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

回答

相关问题