据我所知,所有标准都得到了满足.

>没有固定宽度
>适应各种宽度的内容
>没有过多的填充物

变化

>红色框具有对齐内容：空格 – 在其间减少红色框左右两侧的填充.
>每个弹性项目(flex-ghost除外)是flex：0 0 auto.
> Flex-ghost现在是纯粹的宽度,没有flex的高度：2 0 auto.
>添加了一些JS以使其具有交互性.

PLUNKER

更新1

OP表示固定宽度不起作用,因为如果内容(即弹性项目)可以改变宽度并打破布局.真正构成固定布局的是外容器是刚性的,具有绝对值测量和/或最大限制长度.固定,液体,反应灵敏,适应性强,在一些白葡萄酒等中炒,这不是真正的问题.真正的问题是,在处理不均匀的行时,行方向的flexBox不能很好地处理计算.因此,为了确保内容的统一形成,我发现：

> justify-content：如果您执行下一步,space-around将完美运行.
>再添加一个弹性项目以使行均匀,如果必须具有奇数量的弹性项目,则使用visibility：hidden或opacity：0使最后一项不可见,但不显示：none

详细信息在JS区域(没有添加JS,只是用于评论的空间).

SNIPPET

/* Changes
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
CSS
line 1 to 8
|| Needed basic reset
=====================
line 12
|| To demonstrate behavior in liquid layout.
=====================
line 19 to 24
|| Needed some type of measurement,otherwise it 
|| will expand to fill in that extra space on 
|| the right.
|| flex was set to shrink when width has reached
|| it's basis of 62%.
======================
line 22 to 28
|| Width and flex growth/shrink/basis were added
|| for the same reasons as explained of the 
|| prior ruleset.
|| max-width: 380px is the limit for the red 
|| Box before the content is askew.
|| justify-content: space-around was added in 
|| order to stabilize it's width.
======================
line 11,31 to 33
|| Changed rem units to em because it's ideal for
|| a responsive layout. Although rem is a 
|| relative measurement like it's sister
|| property,em,it's based on the root's default
|| so directly changing that measurement will
|| yield a change,whilst with em,only the 
|| container (or parent) needs to resize on the 
|| fly.
======================
line 44 to 46
|| This ghost flex item is the key to the red 
|| Boxes' content being able to maintain a 
|| uniformed layout.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
HTML
line 8
|| Added an extra div in div.red to be the ghost
|| flex item. Flex items will exhibit a uniform 
|| behavior when there are an equal amount of
|| them in each row.
*/

html,body {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  Box-sizing: border-Box;
}

body > div {
  display: flex;
  width: 100vw;
  justify-content: space-between;
  border: 1px solid black;
}

body > div > div {
  display: flex;
  flex-flow: row wrap;
}

body > div > div.red {
  background: rgba(255,.1);
  flex: 0 1 62%;
  min-width: 60%;
  justify-content: space-around;
}

body > div > div.green {
  background: rgba(0,.1);
  justify-content: space-around;
  flex: 0 1 22%;
  width: 20%;
}

body > div > div > div {
  margin: 1em;
  height: 5em;
  width: 4em;
  background: rgba(0,.1);
}

div.red > div:last-of-type {
  opacity: 0;
}