Flexbox调整元素宽度以不允许空白

Question

我想实现一个多行的flexbox容器，如果未达到最小宽度，则元素的宽度可以减小，以免发生断行时出现较大的空格。 这是我正在处理的示例：https://codepen.io/BaptisteG/pen/dyyQodR

.container {  
border: 5px solid rgb(111,41,97);
border-radius: .5em;
padding: 10px;
display: flex;
flex-wrap: wrap;
row-gap: 1em;
column-gap: 20px;
width: 500px;
}

.item {
 padding: 10px;
 background-color: rgba(111,41,97,.3);
 border: 2px solid rgba(111,41,97,.5);
 flex: 1 1 content;
 min-width: 100px;
 max-width: min-content;
 white-space:nowrap;
 overflow:hidden;
}

我要实现的目标的草图： sketch 我不希望增加元素大小以完成空白