嵌入网站的JavaScript图片画廊无法滚动，求解决方案

解决方案 #

问题根源是嵌入的网站给页面容器设置了固定高度和overflow:hidden，导致画廊内容被截断，无法撑开页面高度。需要做以下修改：

1. 覆盖父容器的固定高度限制 #

添加以下CSS，解除页面容器的高度约束：

/* 针对页面容器的强制覆盖 */
.showit-page-content,
.showit-section[data-section-id] {
  height: auto !important;
  overflow: visible !important;
}

2. 调整画廊容器的flex布局 #

当前.PhotoGallery的align-items: center会强制容器高度适配视口，改为align-items: flex-start让内容自然撑开高度：

.PhotoGallery {
  display: flex;
  justify-content: center;
  align-items: flex-start; /* 替换原有的center */
  flex-wrap: wrap;
  overflow: visible;
}

3. 确保画廊自身容器无溢出限制 #

添加CSS确保画廊的直接容器也能自适应高度：

#main,
.overlay-photogallery {
  overflow: visible !important;
  height: auto !important;
}

原理说明 #

本地环境没有父容器的固定高度约束，画廊内容可以正常撑开页面；但嵌入平台后，平台默认给页面section设置了固定高度和溢出隐藏，导致超出视口的内容被截断且无法滚动。修改后让容器高度随内容自适应，同时调整flex布局避免容器被强制限制在视口高度内。

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