chrome 中的 Flexbox flex-flow 列换行错误？

Question

当使用列换行作为弹性流时，它似乎会对 chrome 中的容器尺寸造成问题。

HTML 示例：

<div class="root">
    <div class="outer">
        <div class="inner">A</div>
        <div class="inner">B</div>
        <div class="inner">C</div>
        <div class="inner">D</div>
        <div class="inner">E</div>
        <div class="inner">F</div>
        <div class="inner">G</div>
        <div class="inner">H</div>
        <div class="inner">I</div>
        <div class="inner">J</div>
    </div>
</div>

CSS: 正文{ 边距: 0; 填充：0；}

    .root{
        display: flex;
    }

    .outer{
        background-color: red;
        display: flex;
        flex-flow: column wrap;
        align-content: flex-start;
        flex: 1 0 auto;
        max-height: 400px;
    }

    .inner{
        background-color: violet;
        border: 1px solid black;
        height: 100px;
        width: 100px;
        flex: 1 0 auto;
        color: white;
        text-align: center;
        font-size: 50px;
    }

为什么 .outer 的宽度就像是 flex-flow: row nowrap; ？为什么 .outer 的高度就像单行一样？

JSFiddle：http://jsfiddle.net/69jvpzef/1/

我是否遗漏了一些东西，或者 Chrome 中的列包装有问题？

Answer 1

在这里查看我的测试。

超文本标记语言

<div class=flex-column id=columnContainer></div>
<div class=flex-row id=rowContainer></div>

CSS

.flex-column {
    align-content: flex-start;
    border: 2px solid;
    display: inline-flex;
    flex-flow: column wrap;
    padding: 10px 0 0 10px;
    height: 330px;
    width: auto;
}
.flex-row {
    align-content: flex-start;
    border: 2px solid blue;
    display: flex;
    flex-flow: row wrap;
    padding: 10px 0 0 10px;
    height: auto;
    width: 330px;
}
.item {
    background-color: #0072c6;
    height: 100px;
    margin: 0 10px 10px 0;
    width: 100px;
    text-align: center;
    color: white;
    font: 42pt/100px 'Segoe UI Light', 'Open Sans';
}

JS

function $(id) {
    return document.getElementById(id);
}

function createItem(index) {
    var e = document.createElement('div');
    e.className = 'item';
    e.textContent = index;
    return e;
}

function render(container, itemCount) {
    for (var i = 1; i <= itemCount; i++) {
        container.appendChild(createItem(i));
    }
}

render($('rowContainer'), 13);
render($('columnContainer'), 13);

总之，

• flex-flow：行换行正常工作
• flex-flow：列换行在 IE11 中有效，但在 Chrome 40 和 Firefox 34 中无效

因此，这确实是一个错误。

P/S：您应该将所有 Flex 项目的box-sizing CSS 属性设置为border-box，否则布局将被破坏。