Css 使flexbox优先显示超过项目最大宽度的更多项目

我有一排盒子，每个盒子的最小/最大宽度为300/400px。我希望flexbox在可能的情况下每行显示更多的框。在宽度上，如果不能水平放置等量的300px盒，则应显示更大的400px盒，以填充剩余空间

在本例中，浏览器宽度为929px时，它显示了两个300px的盒子，理想情况下，它可以安装在其中，并且应该显示两个400px的盒子

.container{
显示器：flex；
柔性包装：包装；
宽度：100%；
身高：100%；
最大宽度：1260px；
右边距：自动；
左边距：自动；
填充物：5px；
}
.卡片{
flex:01300px；
宽度：100%；
最小宽度：300px；
最大宽度：400px；
保证金：5px；
溢出：隐藏；
背景颜色：灰色；
}
.个人资料{
宽度：100%；
最小宽度：300px；
}

一些文本

问题在于这一行：

flex: 0 1 300px;

您已将flex grow设置为0，因此长方体不会增长以适应可用空间

将该行更改为：

flex: 1 1 300px;

---

您的代码也能按预期工作。（）

Doh。谢谢可以约束第二行框的宽度吗？因此，如果最上面一行是300px的盒子，那么最下面一行将与之匹配，而不是增长到可用的400px宽度。@DanChristian我不这么认为。您可以将flex basis设置为基于百分比的值，如

calc（25%-10px）

，然后使用媒体查询在某些断点处更改该值。@DanChristian实际上，似乎有更好的解决方案：