1fr 网格项目内的溢出-x 不起作用

Question

在

display: grid

容器中，我有 2 个子 div。 我希望 div 的大小如下：

第一个 div：300px
第二个 div：获取剩余宽度

对于 Div 2，如果表格无法容纳在 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;
...

代码：https://codepen.io/studiojw/pen/ExEXyYZ

Answer 1

.second

元素溢出。这就是问题所在。将

overflow-x: scroll

添加到

.second

元素即可完成任务。

此外，您还必须删除

overflow-x: auto;

给

.table-wrapper

以避免双滚动条

Answer 2

向网格的直接子级添加 min-width 属性应该可以解决问题。 发生这种溢出是因为网格是基于内容最小尺寸（作为浮动布局）的布局系统。您可以将 min-width 设置为 0。

.wrapper > * {
  min-width: 0;
}

Answer 3

你尝试过吗

grid-template-columns: 300px auto;

这应该使第二个 div 占据可用空间