为何<div>内容过长时无法滚动？已设overflow:scroll仍无效

我有一个设置了灰色背景的<div>，用于展示其作用范围，对应的CSS类如下：

.test{
    overflow: scroll;
    background-color: gray;
}

初始状态：

展开分类后，内容长度超过窗口，但该<div>并未出现滚动条，无法滚动。不过<div>确实在随内容扩展，灰色背景延伸至下方，放大窗口可以看到更多内容。

• 未设置高度限制：overflow: scroll生效的前提是容器有明确的高度约束（如固定height或max-height）。如果容器高度随内容自动撑开，就不会触发滚动。给.test添加固定高度（例如height: 600px）或基于视口的最大高度（例如max-height: 80vh），让内容超出容器高度时触发滚动。
• 父元素布局干扰：若父元素未设置高度限制或设置了overflow: visible，会导致当前<div>被父元素撑开，无法触发自身滚动。检查父元素的CSS，确保父元素不会无限制扩展高度。
• 内部元素脱离文档流：如果<div>内的内容使用了position: absolute等脱离文档流的属性，容器无法正确计算内容高度，也就不会触发滚动。检查内部元素的定位属性，必要时调整布局。
• 替换overflow属性值：尝试将overflow: scroll替换为overflow-y: auto，该属性只会在垂直方向内容超出时显示滚动条，兼容性更好，也能避免不必要的滚动条占位。
• 滚动事件被阻止：检查页面中是否有其他元素（如遮罩层、弹窗）通过CSS的pointer-events: none或JavaScript事件阻止了滚动，或者当前<div>本身被设置了pointer-events: none导致无法响应滚动操作。

内容的提问来源于stack exchange，提问作者inno