CSS设置width:100%的表格置于grid网格中超出列宽如何解决

问题原因 #

这不是Grid布局的bug，属于Grid的默认设计行为：
Grid布局中，网格项的min-width默认值为auto，该规则会让网格项的最小宽度优先匹配内部内容的最大宽度，优先级高于你设定的列宽比例。当表格内有超长内容时，就会撑开右侧网格项，导致溢出设定的列边界。
单列布局下不会触发该问题的原因是：单列时网格项宽度直接与视口宽度绑定，没有足够的横向空间被内容撑开。

修复方案 #

你只需要修改两处CSS规则即可：

1. 调整两列布局下的网格列定义，将grid-auto-columns: 50%替换为fr单位的列定义，自动适配扣除gap后的剩余空间，同时给网格项添加min-width: 0强制遵守列宽限制。
2. 可选优化：移除td上的max-width: 35vw规则，替换为相对父容器的限制，避免视口宽度变化时的布局异常。

修改后的CSS代码示例 #

@media (min-width: 1000px) {
  .two-column-wrapper {
    /* 替换原来的grid-auto-columns: 50% */
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "left-content right-content";
  }
  /* 新增规则，限制网格项最小宽度不超过分配的列宽 */
  .two-column-article {
    min-width: 0;
  }
}

/* 可选：修改td的宽度限制为相对父容器 */
.content-table td {
  overflow: hidden; 
  text-overflow: ellipsis; 
  white-space: nowrap; 
  /* 替换原来的max-width:35vw */
  max-width: 0;
}

如果需要兼容极端超长内容的场景，还可以给右侧内容容器添加横向滚动规则：

.right-content {
  overflow-x: auto;
}

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