Flexbox flex-flow column wrap bugs in chrome?

Question

When using column wrap as flex-flow it seems to cause problems to the container's dimensions in chrome.

Example 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: body{ margin: 0; padding: 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;
    }

Why does .outer have the width as if it was flex-flow: row nowrap; ? Why does .outer have a height as if it has a single row?

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

Am i missing something or is column wrap bugged in chrome?

Answer 1

See my test here.

HTML

<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);

In summary,

• flex-flow: row wrap works normally
• flex-flow: column wrap works in IE11 but not in Chrome 40 and Firefox 34

Therefore, it is really a bug.

P/S: You should set the box-sizing CSS property of all flex items to border-box or the layout will break.