Поведение Mozilla flexbox, отличное от webkit, и т. Д.

Question

Я пытаюсь реализовать вертикальный список элементов, которые обертывают их при переполнении и приводят к горизонтальному прокручиваемому списку. Я хочу использовать flexbox для достижения этого.

Webkit и IE выдают ожидаемый результат. Не так. Пожалуйста, смотрите этот пример:

JSFIDDLE Sample

<div class="listbox flex-direction-vertical flex-wrap"> 
    <div class="listitem"><div class="tablediv"><table><tr><td><div class="content">content</div></td></tr></table></div></div> 
    <div class="listitem"><div class="tablediv"><table><tr><td><div class="content">content</div></td></tr></table></div></div> 
    <div class="listitem"><div class="tablediv"><table><tr><td><div class="content">content</div></td></tr></table></div></div> 
    <div class="listitem"><div class="tablediv"><table><tr><td><div class="content">content</div></td></tr></table></div></div> 
    <div class="listitem"><div class="tablediv"><table><tr><td><div class="content">content</div></td></tr></table></div></div> 
    <div class="listitem"><div class="tablediv"><table><tr><td><div class="content">content</div></td></tr></table></div></div> 
    <div class="listitem"><div class="tablediv"><table><tr><td><div class="content">content</div></td></tr></table></div></div> 
    <div class="listitem"><div class="tablediv"><table><tr><td><div class="content">content</div></td></tr></table></div></div> 
    <div class="listitem"><div class="tablediv"><table><tr><td><div class="content">content</div></td></tr></table></div></div> 
    <div class="listitem"><div class="tablediv"><table><tr><td><div class="content">content</div></td></tr></table></div></div> 
    <div class="listitem"><div class="tablediv"><table><tr><td><div class="content">content</div></td></tr></table></div></div> 
    <div class="listitem"><div class="tablediv"><table><tr><td><div class="content">content</div></td></tr></table></div></div> 
    <div class="listitem"><div class="tablediv"><table><tr><td><div class="content">content</div></td></tr></table></div></div> 
    <div class="listitem"><div class="tablediv"><table><tr><td><div class="content">content</div></td></tr></table></div></div> 
    <div class="listitem"><div class="tablediv"><table><tr><td><div class="content">content</div></td></tr></table></div></div> 
    <div class="listitem"><div class="tablediv"><table><tr><td><div class="content">content</div></td></tr></table></div></div> 
    <div class="listitem"><div class="tablediv"><table><tr><td><div class="content">content</div></td></tr></table></div></div> 
    <div class="listitem"><div class="tablediv"><table><tr><td><div class="content">content</div></td></tr></table></div></div> 
    <div class="listitem"><div class="tablediv"><table><tr><td><div class="content">content</div></td></tr></table></div></div> 
    <div class="listitem"><div class="tablediv"><table><tr><td><div class="content">content</div></td></tr></table></div></div> 
    <div class="listitem"><div class="tablediv"><table><tr><td><div class="content">content</div></td></tr></table></div></div> 
    <div class="listitem"><div class="tablediv"><table><tr><td><div class="content">content</div></td></tr></table></div></div> 
    <div class="listitem"><div class="tablediv"><table><tr><td><div class="content">content</div></td></tr></table></div></div> 
    <div class="listitem"><div class="tablediv"><table><tr><td><div class="content">content</div></td></tr></table></div></div> 
    <div class="listitem"><div class="tablediv"><table><tr><td><div class="content">content</div></td></tr></table></div></div> 
    <div class="listitem"><div class="tablediv"><table><tr><td><div class="content">content</div></td></tr></table></div></div> 
    </div> 

BODY 
{ 
    counter-reset: listitem; /* Create an item counter scope */ 
} 
.content:before { 
    content: "item " counter(listitem) ". "; 
    counter-increment: listitem; /* Add 1 to listitem */ 
} 
.listbox 
{ 
    height: 400px; 
    width:600px; 
    background-color:lightgray; 
    overflow:auto; 

    /* old syntax */ 
    display: -webkit-box; 
    display: -moz-box; 

    /* new syntax */ 
    display: -webkit-flex; 
    display: -moz-flex; 
    display: -moz-flexbox; 
    display: -o-flex; 
    display: -ms-flex; 
    display: -ms-flexbox; 
    display: flexbox; 
    display: flex; 
} 
.flex-direction-vertical 
{ 
    /* old syntax */ 
    -webkit-box-orient: vertical; 
    -moz-box-orient: vertical; 
    -moz-box-align:start; 
    -moz-box-pack:start; 

    /* new syntax */ 
    -webkit-flex-direction:column; 
    -moz-flex-direction:column; 
    -o-flex-direction:column; 
    -ms-flex-direction:column; 
    flex-direction:column; 

} 
.flex-wrap 
{ 
    /* old syntax */ 
    -webkit-box-wrap: wrap; 
    -moz-box-wrap: wrap; 

    /* new syntax */ 
    -webkit-flex-wrap:wrap; 
    -moz-flex-wrap:wrap; 
    -o-flex-wrap:wrap; 
    -ms-flex-wrap:wrap; 
    flex-wrap:wrap; 
} 
.listitem 
{ 
    background-color:green; 
    border: 2px solid red; 
    height:100px; 
    width:200px; 
} 
.content 
{ 
    background-color:gray; 
} 

Пожалуйста, помогите мне найти решение для Firefox.

Спасибо заранее Alex

Answer 1

Если вы смотрите на Firefox до версии 20, то вам повезло. Эти FF следуют спецификациям с 2009 года, а свойство, которое контролирует упаковку, называется box-lines (single | multiple). Единственная проблема заключается в том, что они никогда не реализовывали его: https://bugzilla.mozilla.org/show_bug.cgi?id=562073

Хорошей новостью является то, что начиная с версии 20, FF будет следовать спецификации сентября 2012 года. Я не следил за их прогрессом, но caniuse отмечает его как полностью «поддерживаемую» в этих версиях, а не просто «частично поддерживаемую».