html - 当容器 div 固定时，嵌套的子 div 不可滚动

Question

我有一个设置为 position: fixed 的容器 div(模态)(absolute 不是我的目的的选项)。在这个容器里面我有两列。其中一列包含选项卡按钮，下方有一些内容或表单。此内容(仅内容，而不是选项卡)应该是可滚动的，但我不知道如何滚动。

标签的高度可以改变，因此解决方案不能包含标签栏的固定高度。

我首先尝试通过将列设置为 position: relative、min-height: 100% 和 overflow-y 来使整个列可滚动: 滚动 但第一次尝试甚至没有用。

Codepen with basic setup

编辑

不是 How to make child div scrollable when it exceeds parent height? 的副本

• 我在固定容器内工作
• 我正在使用灵活的高度
• 尝试实现纯 CSS 解决方案

Answer 1

出现此问题是因为您没有向容器“.details-column”声明“max-height”。

试试下面的 CSS :

.content{ max-height: 400px; overflow-y: auto; }

注意:您必须设置容器的固定高度或固定最大高度，否则容器将不知道何时需要滚动数据。