CSS Grid布局overflow-x:scroll在Firefox不生效如何兼容

问题原因 #

Firefox严格遵循Grid布局的默认最小尺寸规则：Grid容器默认min-width为auto，且1fr等价于minmax(auto, 1fr)，会优先适配内容宽度而非限制在容器范围内，因此不会触发横向滚动，内容直接溢出容器。Chromium内核浏览器（Chrome、Brave）对该逻辑做了宽松处理，所以表现符合预期。

适配所有主流浏览器的修改方案 #

修改后的完整代码如下：

.grid-table {
    display: grid;
    height: 95%;
    width: 100%; /* 新增：明确容器宽度约束，避免随内容无限拉伸 */
    grid-template-columns: repeat(4, minmax(0, 1fr)); /* 修改：替换1fr为minmax(0,1fr)，允许列宽收缩到小于内容宽度 */
    gap: 10px;
    overflow-x: auto; /* 可选调整：按需显示滚动条，若必须始终显示滚动条可保留原scroll值 */
    min-width: 0; /* 新增：解除Grid容器默认的最小宽度自动适配规则 */
}

额外排查建议 #

如果修改后仍有问题，可检查.grid-table的父级容器是否设置了明确的宽度约束，若父容器宽度为自适应无上限，也会导致Grid容器无法触发溢出滚动。如果Grid子元素包含超长不可换行内容，可给子元素增加overflow: hidden、text-wrap: wrap等规则限制内容宽度。

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