布局，许多容器需要占用其余空间，但一个内部滚动.CSS

Question

我有一个我花了很多时间的问题，无法以任何方式找到解决方案。我将在Codepen中链接代码。这只是我布局的一个子集。这就是根元素样式的原因。

我基本上有一个布局，页面/屏幕/窗口不应具有滚动，但是当有足够的元素超出了桌子的预期区域时，表小部件的内部应该。

。

基本上，我在页面上有一个顶部内容，还有一个桌面小部件。表小部件将占用屏幕的其余空间。桌子上有一个标题和标题。身体将占用桌子的其余部分，并在具有超出该空间的元素时具有滚动。

我已经通过堆栈跨流搜索了许多资源，并尝试了许多事情。我将在笔中提供布局的当前状态。在这里，您可以看到我认为最好的尝试。

https://codepen.io/anon/pen/klogbj

感兴趣的中心区域是.body元素。根据我读过的东西，我对此进行了样式：

.body {
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow: auto;
  padding: 0.5rem;
  min-height: 0;
}

我感谢对此的任何帮助。

Answer 1

您可以将overflow: scroll;添加到.body并给予.item A min-height

也给您的.table A max-height: 100%;

请参阅此小提琴

Answer 2

问题是要滚动的区域的内容设置为扩展以适合其容器。对于您正在寻找的内部滚动，您需要拥有：

1. 容器的设定高度，因此它不会扩展以适合内容(在这种情况下，您希望它是屏幕的100％(
2. 内容不得在高度上扩展以适合其容器。它必须保持高度，以使其保持比容器大。

如果您有这两个条件，则应该发现出现滚动条。