1fr网格项中overflow-x不生效问题求助

我在display: grid容器内放置了两个子div，想要实现的布局是：第一个div宽度固定300px，第二个div占据容器剩余宽度。同时要求第二个div内的表格超出宽度时显示水平滚动条，但给第二列设置1fr时滚动功能失效，换成固定宽度则正常。

问题代码示例 #

HTML代码：

<div class="wrapper p-4">
  <div class="first">
    Some info
  </div>
  <div class="second">
    <div class="table-wrapper">
          <table>
            <tr>
              <td>Hello</td>
              <td>There</td>
              ...
            </tr>
            <tr>
              <td>Hello</td>
              <td>There</td>
              ...
            </tr>
          </table>
    </div>
  </div>
</div>

CSS代码：

.wrapper {
  display: grid;
  grid-template-columns: 300px 1fr;
}

.table-wrapper {
  overflow-x: auto;
  /* 其他样式 */
}

问题演示 #

原因分析 #

问题出在Grid的1fr计算逻辑上：它会优先保证列能容纳下内容的最小宽度，不会强制把列限制在容器剩余空间里。这就导致表格把.second这个Grid项撑宽了，.table-wrapper根本没有溢出，自然不会触发水平滚动。

解决方案 #

有两种简单的修复方式：

方式一：给Grid项设置最小宽度限制

给.second添加min-width: 0，打破Grid默认的最小内容宽度约束，让它能被容器宽度限制：

.wrapper {
  display: grid;
  grid-template-columns: 300px 1fr;
}

.second {
  min-width: 0; /* 关键：解除Grid项的最小宽度限制 */
}

.table-wrapper {
  overflow-x: auto;
  width: 100%; /* 确保容器填满父元素宽度 */
}

方式二：直接修改Grid列定义

用minmax(0, 1fr)代替1fr，直接把第二列的最小宽度设为0，同样能达到效果：

.wrapper {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr); /* 直接修改列规则 */
}

.table-wrapper {
  overflow-x: auto;
}

内容的提问来源于stack exchange，提问作者studio-pj