编辑:不确定这是否为重复问题?我不希望背景颜色超出容器的宽度,我希望容器会扩展到其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.
有没有什么办法可以解决这个问题?如果需要的话,我可以添加额外的元素!