无法触发容器div内图片垂直滚动条的技术求助

问题根源 #

你的容器#image-1-container虽然设置了绝对定位，但没有添加position: relative，导致内部的绝对定位img元素会相对于body（或最近的其他定位祖先）定位，而非容器本身——这意味着img根本不在容器的范围内，容器自然不会触发滚动条。另外，img的绝对定位会让它脱离容器的文档流，即便定位正确，容器也不会被img撑开，但你给容器设置了固定高度，只要img处于容器范围内且高度超过容器，滚动条就会生效。

解决方案 #

方法1：修正img的定位上下文（推荐）

给容器添加position: relative，让img的绝对定位相对于容器生效，这样img会被限制在容器内，超出部分触发滚动：

修改后的容器CSS：

#image-1-container {
  width: 250px;
  height: 300px;
  top: 150px;
  left: 25px;
  overflow-x: hidden;
  overflow-y: scroll;
  position: absolute;
  position: relative; /* 添加这行，确保img以容器为定位基准 */
}

img的CSS可保留，此时top: 0、left: 0会让img紧贴容器左上角：

#main-image-1 {
  height: 800px;
  width: 400px;
  position: absolute;
  top: 0;
  left: 0;
}

方法2：移除img的绝对定位（更简洁）

如果不需要img的绝对定位，直接移除相关属性，让img回到容器的文档流中，容器会自动识别img的高度，超出部分触发滚动：

修改后的img CSS：

#main-image-1 {
  height: 800px;
  width: 400px;
  /* 移除 position: absolute、top、left 这三行 */
}

效果验证 #

两种方法都能实现预期效果：当img高度（800px）超过容器高度（300px）时，容器显示垂直滚动条，水平方向超出部分被隐藏。

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