如何用CSS选择Flex布局中每行的最后一个子元素？

本问题并非相似Stack Overflow问题的重复，请在标记为重复前仔细阅读。

我已仔细阅读上述相似问题，区别在于该问题是选择最后一行的所有元素，而我需要选择每行的最后一个元素。

是否存在无需JavaScript即可选择Flex布局中每行最后一个元素的方法？在示例中，我希望用CSS选择器选中div 5、10（以及最终的12）。

当然，方案需要支持响应式：

• 窗口尺寸改变时，:nth-child(5)这类固定位置的选择器无法选中正确的div。
• 子div的宽度是可变的。

我再次确认，上述相似问题的需求是选择最后一行的所有元素，而我需要的是每行的最后一个元素。

由于上述问题尚无合适解决方案，我担心若无JavaScript则无法实现需求。

以下是示例代码：

HTML代码 #

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Gajraj+One&family=Monoton&family=Righteous&display=swap" rel="stylesheet">

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

CSS代码 #

#container {
    background-color: LightSteelBlue;   
    
    width: 100%;
    height: fit-content;
    flex-wrap: wrap;
    display: flex;
    justify-content: space-between; 
    /*justify-content: stretch;*/
}

.child {
    font-family: 'Monoton', cursive;
    
    color: white;
    font-size: 40px;
    display : flex;
    align-items : center;
    justify-content: center;
    
    width: 100px;
    height: 100px;
    margin: 10px;
    background-color: SteelBlue;
    
    border: 1px solid black;
    flex-grow: 1;
}

#container::after {
    /*background-color: red;*/
    content: "";    
    flex-grow: 100;
}

内容的提问来源于stack exchange，提问作者Fifi