Shopify站点fieldset网格布局overflow-x:auto在480px媒体查询下失效

核心解决方案 #

要让fieldset[name="Color"]在视口宽度≤480px时触发横向滚动条且不导致整页滚动，关键在于让fieldset形成独立的块级格式化上下文（BFC），同时强制内部网格布局横向排列并限制fieldset自身宽度：

1. 给fieldset设置明确宽度与BFC属性：确保fieldset宽度不超出视口，同时用display: flow-root创建BFC，避免溢出内容影响父元素（包括body/html）。
2. 强制网格容器横向流动：修改内部网格布局的排列方式，让内容横向溢出而不是自动换行。
3. 锁定整页横向溢出：保持html, body { overflow-x: hidden; }，避免整页因内容溢出产生滚动。

具体CSS代码（媒体查询内） #

@media (max-width: 480px) {
  /* 配置fieldset */
  fieldset[name="Color"] {
    width: 100%;
    max-width: 100%; /* 强制不超出视口宽度 */
    overflow-x: auto;
    display: flow-root; /* 创建BFC，隔离溢出内容 */
    padding-bottom: 12px; /* 给滚动条预留空间，防止遮挡选项 */
    box-sizing: border-box; /* 确保内边距不增加总宽度 */
  }

  /* 配置内部网格容器 */
  fieldset[name="Color"] .grid-container {
    display: grid;
    grid-auto-flow: column; /* 强制网格项横向排列，不换行 */
    grid-auto-columns: minmax(70px, auto); /* 给每个选项设置最小宽度 */
    gap: 10px; /* 保持选项间的间距 */
  }

  /* 可选：固定网格项尺寸，避免内容拉伸 */
  fieldset[name="Color"] .grid-item {
    min-width: 70px;
    text-align: center;
  }
}

为什么之前的尝试无效？ #

• 你之前给网格项加min-width但没设置grid-auto-flow: column，网格默认会自动换行，不会横向溢出fieldset，自然不会触发滚动条。
• 给html/body设overflow-x: visible会解除整页的横向限制，导致溢出内容直接撑大页面，而不是被fieldset的滚动条包裹。
• 若fieldset未形成BFC，溢出的内容会“逃出”fieldset范围，触发父元素（甚至body）的滚动，而非自身滚动条。

额外排查点 #

• 检查fieldset的直接父元素是否设置了overflow: hidden，如果有会截断溢出内容，导致滚动条不显示。
• 确认fieldset没有被float、position: absolute等属性影响，这些会改变它的盒模型行为。
• 移除fieldset上可能存在的width: fit-content或类似属性，确保它能占满视口宽度。

内容的提问来源于stack exchange，提问作者Tomas Gil Amoedo