Flexbox 列重叠

Question

我正在尝试使用 flexbox 模仿 WinJS 分组 ListView 。我越来越接近(我认为)，除了调整大小时列重叠。

http://jsfiddle.net/w8ts4Lnx/5/

我希望项目留在组内，让组水平增长。

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

h1 {
   padding: 1em;
}

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

#content > .group {
    margin: 10px;
    padding: 10px;
    border: 1px solid #cfcfcf;
    background-color: #ddd;
    display: flex;
    flex-flow: column wrap; 
    max-height: 600px;    
}

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

有什么我想念的想法吗？

Answer 1

如果您不希望您的内容溢出容器，您必须指定 flex-shrink: 0;

flex-shrink source

This 'number' component sets flex-shrink longhand and specifies the flex shrink factor, which determines how much the flex item will shrink relative to the rest of the flex items in the flex container when negative free space is distributed. When omitted, it is set to 1. The flex shrink factor is multiplied by the flex basis when distributing negative space.

我不确定你想模仿什么 winJS 行为，因为我从未使用过 winJS，但我认为这更接近你想要实现的正确行为: http://jsfiddle.net/w8ts4Lnx/11/