如何让CSS Grid溢出项的padding-right属性生效？

针对你遇到的Chrome中CSS Grid布局下，内容溢出时网格项右侧内边距被忽略的问题，这里提供一个无需修改HTML结构、无需使用伪元素的修复方案：

核心修复思路 #

问题根源是Chrome对Grid容器设置justify-content: center时，滚动容器的宽度计算存在偏差，导致padding-right被滚动条区域覆盖。我们可以通过让网格项自身通过margin实现水平居中，替代容器的justify-content: center属性，来修正这个渲染问题。

修改后的CSS代码 #

#container { 
  display: grid; 
  padding: 1em; 
  position: absolute; 
  top: 0; bottom: 0; left: 0; right: 0; 
  background-color: white; 
  align-content: center; 
  /* 移除justify-content: center */
}
#item { 
  text-align: justify; 
  font-size: 20px; 
  text-shadow: 1px 1px lightblue; 
  max-width: 400px; 
  background-color: lightyellow; 
  padding: 1em; 
  overflow: auto; 
  margin: 0 auto; /* 添加这行实现水平居中 */
}
h1 { text-align: center; color: darkred; }
a { color: darkred}

为什么这个方案有效 #

• 当使用margin: 0 auto时，网格项会在Grid容器的水平轨道中自动居中，此时浏览器会正确计算滚动容器的可滚动区域，包含所有内边距。
• 这个修改不会影响原有布局的其他特性：垂直居中依然通过容器的align-content: center实现，max-width的限制也会正常生效。
• 修复后在Chrome和Firefox中都能保持一致的表现，解决了跨浏览器差异问题。

另外补充一点：你提到Flexbox实现时的问题，其实如果用Flexbox的话，也可以通过类似的思路——用margin: auto实现居中，同时给Flex容器设置min-height: 100vh（替代绝对定位），不过既然你更倾向于CSS Grid的简洁性，上面的方案完全适配你的需求。

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