如何在保持相同尺寸的同时允许柔性物品生长？

Flexbox是网页设计师所希望的最酷工具之一.不幸的是,有时我不应该立即明白我应该做什么.举例来说,这个插头.我希望扩展项目以填充行,而不是在最后一行中一直扩展.
我的CSS包含这些重要的东西:

.recipe-picker recipe {
    -webkit-flex: 0 1 8em;
    flex: 0 1 8em;

    height: 12em;
}

如果我将更0改为任何正数(对应于flex-grow属性),则最后一个项目行将以超级丑陋的方式拉伸.其余的项目表现相当不错,但最后一行应保持与其他项目相同的大小.
我该怎么做才能解决这个问题？

这是目前无法通过CSS Flexbox表达的内容.几天前有人在CSS工作组邮件列表上基本上问了这个确切的问题,响应是:"目前,不,这是不可能的.但这是Flexbox 2的高优先级项目.

你可能能够破解你想要的东西max-width,但是这会阻止弹性物品(特别是最后一行的物品)无限增长.这是你的插件的分叉版本,非零弹性增长,并与max-width: 10em.

(我10em任意选择;你也可以使用例如max-width: calc(100%/5),如果你想确保每个弹性项目占用的线数不超过该线的1/5.)