Flexbox ошибки обтекания столбцов flex-flow в 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:       тело {           margin: 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/

Я что-то пропустил или столбец обернулся в хром?

Ответы

Ответ 1

Смотрите мой тест здесь.

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

Таким образом,

  • flex-flow: обертка строк работает нормально
  • flex-flow: обертка столбца работает в IE11, но не в Chrome 40 и Firefox 34

Следовательно, это действительно ошибка.

P/S: вы должны установить свойство CSS для определения размера коробки для всех элементов гибкости в border-box или макет будет разорван.