Html 弹性增长最大值或缩小元素之间的间距

我正在基于同一行上的两个列表构建导航。两个列表中的所有项目之间都应该有间距，但最多为

25px

flex grow的问题： 如果我使用flex grow，元素会比它们自己的宽度+25px大，因为有足够的可用空间

右边距的问题： 如果容器较小，则25px右侧的边距不会减少，则项目将断行，而不是收缩边距

可能的解决办法： 在每个元素之间使用div，使其

flex-grow:1

和

最大宽度：25px

没有额外的html还有其他方法吗

下面是一个代码笔，显示了问题：

ul，
李{
列表样式：无；
保证金：0；
填充：0；
}
ul，
.货柜，
.集装箱2{
显示器：flex；
证明内容：之间的空间；
}
.货柜，
.集装箱2{
边框：1px纯红；
宽度：500px；
边缘底部：20px；
}
氢{
边缘底部：5px；
}
p{
保证金：0.5px 0；
}
.集装箱保险商实验室{
柔性生长：1；
/*这是可行的，但每个元素只能增长25像素*/
}
.集装箱保险商实验室，
.集装箱2 ul.first{
右边距：30px；
}
.集装箱2 ul.第一李{
右边距：25px；
/*这是可行的，但是如果没有足够的空间，应该减少*/
}

示例1:li上的flex增长
问题：项目太大，最大间距应为25px


首先
第二
第三
第四
第五
第六


首先
第二

例2：li上的右边距
问题：较小容器上的间距没有减小


首先
第二
第三
第四
第五
第六


首先
第二

<代码> < P>一个想法是考虑使用伪元素和<代码>显示：内容< /代码> 


ul，
李{
列表样式：无；
保证金：0；
填充：0；
}
保险商实验室{
显示：内联flex；
最大宽度：100%；
}
.集装箱{
边框：1px纯红；
边缘底部：20px；
显示器：flex；
柔性包装：包装；
证明内容：之间的空间；
}
氢{
边缘底部：5px；
}
p{
保证金：0.5px 0；
}
.集装箱保险商实验室{
右边距：30px；
最大宽度：计算（100%-30px）；
}
ul li：不是（最后一个孩子）{
显示：内容；
}
李：不是（：最后一个孩子）：：之后{
内容：“；
宽度：25px；
}


首先
第二
第三
第四
第五
第六


首先
第二

我们知道每个列表中的项目数吗？我们知道列表的最大宽度吗？@UtsavPatel不幸的是，不知道，项目长度是动态的（也是因为多种语言），列表的最大宽度也是动态的，因为同一行中有两个列表，所以我认为如果没有你在文章中提到的附加div，就无法解决这个问题。下面是一个使用CSS网格的尝试。这就是你说的吗@当容器变小时，有没有办法缩小间隙？这太棒了，谢谢！不幸的是，它只在chrome上运行，在safari上不起作用，在IE11（）上根本不起作用：（有没有办法调整它以使其运行crossbrowser？