html - Mozilla flexbox 行为不同于 webkit 和 ie

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 的解决方案。

提前谢谢你亚历克斯

Answer 1

如果您使用的是版本 20 之前的 Firefox，那您就不走运了。这些 FF 遵循 2009 年的规范，控制换行的属性称为 box-lines(单|多)。唯一的问题是，他们从未实现过:https://bugzilla.mozilla.org/show_bug.cgi?id=562073

好消息是，从版本 20 开始，FF 将遵循 2012 年 9 月的规范。我没有关注他们的进展，但 Caniuse 将其标记为在这些版本中得到完全“支持”，而不仅仅是“部分支持”。