Google chrome 如何使用css3 flexbox创建多列布局而不进行垂直扩展？

我正在用Chrome玩css3的flexbox（无需为此担心跨浏览器）。我很难说服它按照我喜欢的方式来展示我的内容。以下是我的目标草图：

这里是我尝试的一部分：这似乎很有效，除了每个

。组将扩展其高度，而不是创建多个列

我在这里广泛使用flexbox。
body
垂直布局，其中
#content
div占据页面的剩余高度。每个
.group
都是水平布置的。最后，每个
.item
都在
.group
中用包装垂直排列

不幸的是，通过扩展
#content
高度，每个
.group
都会变成一列，这会导致一个垂直滚动条（不需要）。如果我将每个
.group
的高度设置为固定的像素大小，则项目会分成多列，但这会破坏flexbox的流动性。以下是固定高度的情况：

那么，我如何才能使我的
#content
div不垂直扩展，因为所有内容都是用FlexBox管理的，而没有设置固定的高度？我原以为flexbox会触发更多的列，而不是扩展其父元素的高度并导致滚动条。
从我所看到的flexbox的Chrome和Opera实现来看，列的
flex direction
需要限制元素的高度，否则它将继续垂直扩展。它不一定是一个固定的值，它可以是一个百分比

也就是说，您想要的
.group
元素的布局也可以通过使用CSS Columns模块来实现。元素的流动与flexbox列方向相似，但只要有足够的宽度，不管文档有多长，它都会创建列

（你必须原谅没有前缀）

将其作为一堆嵌套的FlexBox，这是我能得到的最接近的结果：

（同样，没有前缀）

替换css中的以下内容-
显示：-webkit-flex
以下各项—
显示：-webkit框

这对我来说效果很好：-）
无论窗户有多大/多小，整个东西都应该是流体吗？为什么项目具有固定的200px宽度？任何.group都应该有列还是只有第一列？是否应该有任何溢出？（如果我向每个组添加100个项目会怎么样）Flexbox不会使可堆叠的列成为您想要的列，这不是Flexbox的布局目标。在你的图片中得到你想要的东西很容易，我只是不知道所有的缩放要求，这可能会使仅仅使用CSS变得非常困难或不可能。@skyline3000我正在试验一种Windows 8“metro”风格的设计，使用简单的HTML/CSS，因此，理想情况下，每个组将根据需要水平添加列，并根据需要创建一个水平滚动条
iff
（因此，首先垂直添加元素，然后水平按列包装）。我可以想象用JS实现这一点的方法，但我希望在Webkit中只使用HTML5/CSS3即可。@skyline3000直接回答您的问题：是的，无论屏幕的高度/宽度如何，它都应该是流动的（我无法控制屏幕大小）。每个项目都是固定大小的设计，这将是真正的为我的最终实施。也许不是那些精确的尺寸，但仍然是固定的。最后，正如我上面提到的，元素应该垂直填充，然后水平溢出。
html {
    height: 100%;
}

body {
    height: 100%;
    display: flex;
    flex-flow: column nowrap;
}

h1 {
    padding: 1em;
}

#content {
    padding: 10px;
    background-color: #eee;
    display: flex;
    flex-grow: 1;
}

#content > .group {
    margin: 10px;
    padding: 10px;
    border: 1px solid #cfcfcf;
    background-color: #ddd;
    flex: 1 1 auto;
}

#content > .group:first-child {
    columns: 10em;
    flex-grow: 2;    
}

#content > .group .item {
    margin: 10px;
    padding: 10px;
    background-color: #aaa;
    break-inside: avoid;
}

#content > .group .item:first-child {
    margin-top: 0;
}

html {
    height: 100%;
}

body {
    height: 100%;
    display: flex;
    flex-flow: column nowrap;
}

h1 {
    padding: 1em;
}

#content {
    padding: 10px;
    background-color: #eee;
    display: flex;
    flex: 1 1 auto;
    height: 100%;
    width: 100%;
}

#content > .group {
    margin: 10px;
    padding: 10px;
    border: 1px solid #cfcfcf;
    background-color: #ddd;

    display: flex;
    flex-flow: column wrap;
    flex: 1 1 30%;
    max-height: 100%;
}

#content > .group .item {
    margin: 10px;
    padding: 10px;
    background-color: #aaa;
}