删除带有包装儿童的Flexbox上的额外间距？

Question

每当Flexbox内的物品包裹时，它们都会拉伸弹性箱，在侧面留出额外的空间。它只在物品包装时发生。如何摆脱额外的间距？

问题的屏幕截图

我想要它做什么

代码

HTML

<div>
  <div class="red">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
  <div class="green">
    <div></div>
  </div>
</div>

CSS

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

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

body > div > div.red {
  background: rgba(255, 0, 0, .1);
}

body > div > div.green {
  background: rgba(0, 255, 0, .1);
  flex-shrink: 0;
}

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

See an example on JSFiddle

Answer 1

更新2

据我所知，所有标准都得到了满足。

• 没有固定宽度
• 容纳各种宽度的内容
• 没有过多的填充

更改

• 红框有justify-content: space-between，可减少红框左右两侧的填充。
• 每个弹性项目（flex-ghost除外）为flex: 0 0 auto。
• Flex-ghost现在是纯粹的宽度，没有flex: 2 0 auto的高度。
• 添加了一些JS以使其具有交互性。

PLUNKER

<小时/>

更新1

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

如果您执行下一步，
1. justify-content: space-around将完美运行。
2. 再添加一个弹性项目以使行均匀，如果您必须使用奇数个弹性项目，请使用visibility: hidden或opacity: 0，使最后一项不可见不 display: none

详细信息在JS区域（没有添加JS，只是它的空间用于评论）。

段

/* 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, 0, 0, .1);
  flex: 0 1 62%;
  min-width: 60%;
  justify-content: space-around;
}

body > div > div.green {
  background: rgba(0, 255, 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, 0, 0, .1);
}

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

<div>
  <div class="red">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
  <div class="green">
    <div></div>
  </div>
</div>

Answer 2

在max-width上设置body > div > div.red会实现您正在寻找的内容吗？

JSFiddle