使用“显示：网格”使父级扩展到子级的宽度

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，并附加{{1} }强制行项目具有完整宽度（与默认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;
}

更新2

要允许行延伸到容器的整个宽度（如果宽度大于所有列的总和），可以通过将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.替换为{{ 1}}，请参见下面的示例：

display: flex

display: grid

Answer 2

如果需要用单元格宽度填充 grid-template-columns ，则应尝试：

.row {
  display: grid;
  grid-template-columns: auto auto auto auto;
  background: red;
  height: 3rem;
}

对于每个单元格200px的宽度，只需添加：

.cell {
    min-width: 200px;
    border: 1px solid black;
}