Gradio gallery parameter rows does not work and no scrollbar appears if too many images

问题场景

用户在使用 Gradio 的 gr.Blocks 构建页面时，创建了一个 gr.Gallery 组件并传入 columns=12 和 rows=1 参数，同时指定 height=200 以限制显示区域高度。通过按钮点击事件向 Gallery 中动态插入新图片，当图片数量超过单行可容纳数量后，Gallery 没有按 rows=1 的限制保持单行并出现滚动条，而是追加了新行，且新行因超出高度限制被裁切，但页面未出现任何滚动条，导致新添加的图片无法被看到。

报错原文

Gradio gallery parameter rows does not work and no scrollbar appears if too many images

原因分析

可能原因是 Gallery 组件中 rows 参数与 height 参数组合时的样式逻辑存在缺陷：当图片数量超出单行容量时，组件在 DOM 层追加了新行，但外层容器的 overflow 属性未正确设置为 auto 或 scroll，导致内容溢出后没有滚动条可用。另一个可能原因是 rows 参数在动态更新 Gallery 值（通过按钮回调）时未正确约束布局，仅在初始渲染时生效。Issue 中确认此问题在 Gradio 4.44.0、5.6.0、5.12.0 上均存在，但当前 main 分支（6.25.0）已无法复现，说明该问题属于历史版本中的布局回归，已被后续修复。

环境排查

• 确认 Gradio 版本：在 4.44.0、5.6.0、5.12.0 上可复现；6.25.0（main 分支）已修复。
• 确认 Gallery 参数组合：columns=12、rows=1、height=200、object_fit="contain"、interactive=False。
• 确认触发方式：通过按钮回调动态向 Gallery 列表头部插入新图片（history.insert(0, new_image)）。
• 检查使用的 Python 版本及浏览器版本，确认是否与 Gradio 前端资源加载相关（Issue 未提供此方面证据，作为补充排查项）。

解决步骤

1. 升级 Gradio 到最新版本（可优先尝试）：Issue 中官方在 Gradio 6.25.0（main 分支，提交 375335e60）上复测 30 张图片、columns=12、rows=1、height=200 的场景，垂直滚动条正常工作，且继续添加图片后滚动行为保持正常。该修复被归因于 #11938，请升级到包含此 PR 的版本。
2. 若无法升级，改用 CSS 强制约束高度（推测方案，未在 Issue 中验证）：尝试通过自定义 CSS 为 Gallery 外层容器设置 overflow-y: auto，或调整 height 参数为更大的值，观察是否能触发滚动条。此方法未被 Issue 证实，仅为可能有效的工作区。
3. 减少单次添加的图片数量（临时规避）：如果图片数量在可预见的范围内，可以限制单行显示数量，例如调低 columns 值，使图片不超过单行容量，从而规避新行溢出问题。
4. 复现验证脚本：使用 Issue 评论中提供的验证脚本（含 30 张初始图片及上传添加功能）在目标版本上运行，确认滚动条是否出现。

验证方法

运行 Issue 评论中提供的验证脚本，确认 Gallery 中显示 30 张初始图片时容器内出现可滚动的垂直滚动条；随后上传一张新图片并点击按钮添加到头部，确认滚动条仍然存在且新图片可被滚动查看。若上述操作均正常，说明问题已解决。

参考来源

gradio-app/gradio #10044

AI 工具推荐

想把多个 AI 模型放在一个入口？

GamsGo AI 集成 ChatGPT、DeepSeek、Gemini、Claude、Midjourney、Veo 等常用模型，适合写作、绘图、视频和日常 AI 工作流。

了解 GamsGo AI

推广链接：通过此链接购买，我可能获得佣金，不影响你的价格。