使用“display: grid”使父级扩展到子级的宽度

Question

编辑：不确定这是重复的吗？我不希望背景颜色超出容器的宽度，我希望容器扩展到其display: grid子容器的大小。更新了示例以更好地解释我的问题。

我正在构建一个表，其中每一行都是一个 css 网格。我这样做是为了利用minmax()每个单元格的 ，使整个表格在其单元格不再缩小时可滚动，同时允许表格在有更多可用空间时增长。

除了行的样式仅适用于容器的宽度之外，这种方法工作得很好。

请看这个例子：

.container {
  width: 430px;
  background: grey;
  overflow-x: scroll;
}

.row {
  display: grid;
  grid-template-columns: minmax(200px, 1fr) minmax(200px, 1fr) minmax(200px, 1fr) minmax(100px, 1fr);
  background: red;
  height: 3rem;
  margin: 0.5rem;
}

.cell {
  border: 1px solid black;
}

Scroll to the right inside the box:
<div class="container">
  <div class="row">
    <span class="cell">cell 1</span>
    <span class="cell">cell 2</span>
    <span class="cell">cell 3</span>
    <span class="cell">cell 4</span>
  </div>
  <div class="row">
    <span class="cell">cell 1</span>
    <span class="cell">cell 2</span>
    <span class="cell">cell 3</span>
    <span class="cell">cell 4</span>
  </div>
</div>
Elements with the <code>.row</code> class should expand to fit all the cells.

有什么办法可以解决这个问题吗？如果需要的话，我可以添加额外的元素！

Answer 1

更改行的显示inline-grid似乎有帮助：

.container {
  width: 430px;
  background: grey;
  overflow-x: scroll;
}

.row {
  display: inline-grid;
  grid-template-columns: minmax(200px, 1fr) minmax(200px, 1fr) minmax(200px, 1fr) minmax(100px, 1fr);
  background: red;
  height: 3rem;
}

.cell {
  border: 1px solid black;
}

Scroll to the right inside the box:
<div class="container">
  <div class="row">
    <span class="cell">cell 1</span>
    <span class="cell">cell 2</span>
    <span class="cell">cell 3</span>
    <span class="cell">cell 4</span>
  </div>
  <div class="row">
    <span class="cell">cell 1</span>
    <span class="cell">cell 2</span>
    <span class="cell">cell 3</span>
    <span class="cell">cell 4</span>
  </div>
</div>
The red background should cover the whole row.

更新1

为了避免宽容器/窄子项进入一行的问题（与上面的解决方案一样），您可以使用一种更复杂的解决方案，该解决方案display: flex; flex-direction: column在父项上使用 a ，并附加align-items: start强制行项目具有全宽度（与默认值stretch，这使得行宽度不比容器宽）。

.container {
  width: 430px;
  background: grey;
  overflow-x: scroll;
  display: flex;
  flex-direction: column;
  align-items: start;
}

.container.container-wide{
  width: 1000px;
}

.row {
  display: grid;
  grid-template-columns: minmax(200px, 1fr) minmax(200px, 1fr) minmax(200px, 1fr) minmax(100px, 1fr);
  background: red;
  height: 3rem;
}

.cell {
  border: 1px solid black;
}

Scroll to the right inside the box:
<div class="container">
  <div class="row">
    <span class="cell">cell 1</span>
    <span class="cell">cell 2</span>
    <span class="cell">cell 3</span>
    <span class="cell">cell 4</span>
  </div>
  <div class="row">
    <span class="cell">cell 1</span>
    <span class="cell">cell 2</span>
    <span class="cell">cell 3</span>
    <span class="cell">cell 4</span>
  </div>
</div>
Wide container:
<div class="container container-wide">
  <div class="row">
    <span class="cell">cell 1</span>
    <span class="cell">cell 2</span>
    <span class="cell">cell 3</span>
    <span class="cell">cell 4</span>
  </div>
  <div class="row">
    <span class="cell">cell 1</span>
    <span class="cell">cell 2</span>
    <span class="cell">cell 3</span>
    <span class="cell">cell 4</span>
  </div>
</div>
The red background should cover the whole row.

更新2

为了允许将行拉伸到容器的整个宽度（以防它比所有列的总和宽），可以通过将 替换为 来调整更新 1 中的解决方案display: flex，display: grid请参见下面的示例：

.container {
  width: 430px;
  background: grey;
  overflow-x: scroll;
  display: grid;
}

.container.container-wide{
  width: 1000px;
}

.row {
  display: grid;
  grid-template-columns: minmax(200px, 1fr) minmax(200px, 1fr) minmax(200px, 1fr) minmax(100px, 1fr);
  background: red;
  height: 3rem;
}

.cell {
  border: 1px solid black;
}

Scroll to the right inside the box:
<div class="container">
  <div class="row">
    <span class="cell">cell 1</span>
    <span class="cell">cell 2</span>
    <span class="cell">cell 3</span>
    <span class="cell">cell 4</span>
  </div>
  <div class="row">
    <span class="cell">cell 1</span>
    <span class="cell">cell 2</span>
    <span class="cell">cell 3</span>
    <span class="cell">cell 4</span>
  </div>
</div>
Wide container:
<div class="container container-wide">
  <div class="row">
    <span class="cell">cell 1</span>
    <span class="cell">cell 2</span>
    <span class="cell">cell 3</span>
    <span class="cell">cell 4</span>
  </div>
  <div class="row">
    <span class="cell">cell 1</span>
    <span class="cell">cell 2</span>
    <span class="cell">cell 3</span>
    <span class="cell">cell 4</span>
  </div>
</div>
The red background should cover the whole row.