Html 柔性换行在换行到多行时添加额外空间

我有一个带有

flex-wrap:wrap

的flex。当所有项目都放在一行中时，容器仅采用内容宽度。但是，当它换行到多行时，会在右侧添加额外的空间。我尝试了

inline flex

和

align content:flex start

但是没有成功

我怎样才能使它的容器的项目的宽度正好适合他们的宽度添加额外的填充

在下面的链接示例（我的笔记本电脑屏幕）上，如果我最多有3个项目div（第一行有2个项目，第二行有第三个项目），这很好，但当我添加第四个项目div（第一行有第一个和第二个项目，第二行有第三个和第四个项目）时，填充将自动添加

。祖父母{
显示器：flex；
}
.切换{
显示：无；
}
梅因先生{
显示器：flex；
柔性包装：包装；
边框：1px纯蓝色；
}
.项目{
宽度：300px；
边框：1px点绿色；
填充：10px
}
.伊康迪夫{
宽度：800px；
边框：1px实心#333；
}

切换
第一
第二
第三
第四
图标分区

我认为这样的东西会根据您的需要而起作用：

.grandparent{display:flex；}
.toggle{显示：无；}
梅因先生{
显示器：flex；
柔性包装：包装；
边框：1px纯蓝色；
弯曲方向：行；
宽度：604px！重要；
高度：70px！重要；
}
.grandparent、.parent.main、.item{
宽度：300px；
边框：1px点绿色；
位置：相对位置；
浮动：左！重要；
}
.grandparent.icondiv{宽度：800px；边框：1px实心#333；}

切换
第一
第二
第三
第四
图标分区

你的意思是不添加额外的填充？检查我的回答谢谢你的代码。但是，您的解决方案会垂直堆叠项目。我希望项目仅在水平空间用完时进行换行。如果你看我的代码笔样本，第一和第二项在第一行，第三和第四项在第二行。这就是我想要的（右边没有额外的填充）。@whtflower ahh在这种情况下，您可以设置主容器的宽度，以便只从右边填充两个项目，等等，我将更新我的answer@whtflower检查更新的答案，应该是这样的？父容器（.main）不应该有初始宽度/高度。我想它是灵活的，以适应项目。它需要根据项目大小来确定。