含overflow-x内部元素的Grid模板在Chrome中布局异常但Firefox正常

我完全懂你遇到的这个头疼问题——用Grid布局时，装着超宽表格的容器在Firefox里能乖乖触发overflow-x: auto显示自身滚动条，但Chrome和Opera却非要让整个页面出现滚动条，内容直接超出窗口范围。不用Grid就一切正常，这明显是不同浏览器对Grid子元素的默认处理逻辑差异搞的鬼。

问题根源 #

Chrome和Opera中，Grid容器的直接子元素（也就是你的.content）默认自带min-width: auto属性，这意味着它会优先适配内部内容的宽度，哪怕内部元素设置了overflow，它也不会主动收缩宽度。所以当里面有.big这种超宽元素时，.content会被直接撑大，超出Grid容器的限制，进而导致整个页面出现全局滚动条。而Firefox在这部分的处理更贴合预期，会让子元素尊重内部的overflow规则。

修复方案 #

只需要给.content加一行简单的CSS就能搞定，修改后的完整代码如下：

.content { 
  grid-area: content; 
  display: block; 
  max-width: 1200px; 
  margin: 0 auto; 
  width: 100%; 
  box-sizing: border-box; 
  min-height: calc(100vh - 6em); 
  overflow: hidden; 
  min-width: 0; /* 新增这一行，解决兼容问题 */
}
.footer { grid-area: footer; height: 3em; background-color: grey; }
.sidemenu { height: 3em; grid-area: sidemenu; background-color: grey; }
.wrapper { display: grid; grid-template-areas: "sidemenu" "content" "footer"; }
.big { background-color: green; width: 2980px; height: 20px; }
.blockWrapper { overflow-x: auto; }
@media (min-width: 500px) {
 .wrapper { grid-template-columns: 3em 1fr; grid-template-areas: "sidemenu content" "sidemenu footer"; }
 .sidemenu { height: 100%; }
}

<div class="wrapper">
 <div class="sidemenu"></div>
 <div class="content">
  <div class="blockWrapper">
   <div class="big"></div>
  </div>
 </div>
 <div class="footer"></div>
</div>

原理解释 #

min-width: 0会覆盖Grid子元素默认的min-width: auto，允许.content的宽度可以收缩到小于内部内容的宽度。这样一来，内部的.blockWrapper设置的overflow-x: auto就能正常生效，当内容超出时只显示自身的横向滚动条，再也不会撑大整个.content导致页面出现全局滚动条了。

修改后你再测试一下，Chrome、Opera和Firefox的表现就会完全一致啦，只有表格的父区块会显示滚动条。

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