CSS Grid固定首列宽、双向滚动时溢出列宽度失效问题

原有写法grid-template-columns: 49px repeat(auto-fit, 300px)存在逻辑缺陷：

• auto-fit/auto-fill关键字只会计算容器当前可视宽度范围内能容纳的列数，仅给这部分显式列套用300px宽度规则
• 开启grid-auto-flow: column后，超出可视区的列属于Grid自动生成的隐式列，不会读取grid-template-columns里的宽度配置，默认按内容自适应宽度，最终出现溢出列宽度不符合预期的问题。

直接通过grid-auto-columns属性统一指定所有隐式生成列的宽度即可，不需要在grid-template-columns里用auto-fit/auto-fill做重复列定义：

.grid-container {
  display: grid;
  /* 仅定义首列固定宽度 */
  grid-template-columns: 49px;
  /* 所有自动生成的非首列，统一设置宽度为300px */
  grid-auto-columns: 300px;
  grid-auto-flow: column;
  width: 100%;
  height: 70vh;
  /* 双向溢出滚动 */
  overflow: auto;
}

/* 可选：单元格基础样式，方便预览效果 */
.grid-container > div {
  border: 1px solid #e5e7eb;
  padding: 12px;
  box-sizing: border-box;
}

原有HTML结构不需要做任何修改，直接复用即可。

• 首列始终保持49px固定宽度，不会随滚动或内容多少变化
• 其余所有列（包含可视区内、水平溢出区域的列）宽度统一为300px，不会出现宽度错乱
• 水平方向内容总宽度超出容器时自动显示横向滚动条，垂直方向内容高度超出70vh时自动显示纵向滚动条
• 总列数完全随内容数量自适应，不需要提前手动指定列数

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