Flexbox:将元素保持为伸缩换行前的最后一个元素

Question

我试图保持一个元素在第一行(作为最后一个元素)的包装元素列表。我知道这是可能的使用JS，但我想知道是否有一个CSS唯一的解决方案。我能得到的最接近的方法是将元素放在单独的容器中，但这会导致元素之间产生不必要的空格:

.container {
display: flex;
}
.left {
display: flex;
flex-wrap: wrap;
}
.left > div {
padding: 1rem 1.5rem;
background: blue;
}
.right > div {
padding: 1rem 1.5rem;
background: red;
}

<div class="container">
<div class="left">
<div>Left 1</div>
<div>Left 2</div>
<div>Left 3</div>
<div>Left 4</div>
<div>Left 5</div>
<div>Left 6</div>
<div>Left 7</div>
<div>Left 8</div>
<div>Left 9</div>
</div>
<div class="right">
<div>More</div>
</div>
</div>

基本上，红色元素应该直接跟在蓝色元素第一行的最后一个元素后面，而蓝色元素则在它们的容器内进行换行。这是可能的纯CSS吗?

Answer 1

对于CSS-Grid，这是可能的，但有一些注意事项。你必须为你的子元素指定一个默认宽度，如果没有足够的子元素来填充一行，你可能会再次出现空白。

Codepen演示

.container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(100px, auto));
}
.container div {
display: flex;
padding: 1rem 1.5rem;
background: blue;
white-space: nowrap;
}
.container .right {
grid-column-end: -1;
grid-row: 1;
padding: 1rem 1.5rem;
background: red;
}

<div class="container">
<div>Left 1</div>
<div>Left 2</div>
<div>Left 3</div>
<div>Left 4</div>
<div>Left 5</div>
<div>Left 6</div>
<div>Left 7</div>
<div>Left 8</div>
<div>Left 9</div>
<div class="right">More</div>
<div>Left 10</div>
<div>Left 11</div>
<div>Left 12</div>
</div>