Scroll not working with CSS3 flex box in Firefox - html

Question

I am using box-flex for my layout, but I am unable to get the flex box to scroll.
HTML:
<div class='dashboard'>
<div><button>Widget</button></div>
<div class="noboard"><button>Yammer</button>
<div class="yammerboard" >
<div><button>Dashboard22</button></div>
<div><button>Dashboard22</button></div>
<div><button>Dashboard22</button></div>
<div><button>Dashboard22</button></div>
<div><button>Dashboard22</button></div>
</div>
</div>
<div><button>Notifications</button></div>
</div>
CSS:
.dashboard {
display: box;
display: -webkit-box;
display: -moz-box;
display: -ms-box;
box-orient:vertical;
-ms-box-orient: horizontal;
-moz-box-orient:horizontal;
-webkit-box-orient: horizontal;
border: solid 2px black;
overflow-y:auto;
}
.noboard {
display: box;
display: -webkit-box;
display: -moz-box;
display: -ms-box;
box-orient:vertical;
-ms-box-orient: vertical;
-moz-box-orient:vertical;
-webkit-box-orient: vertical;
overflow-y:auto;
}
.yammerboard {
display: box;
display: -webkit-box;
display: -moz-inline-box;
display: -ms-box;
box-orient:vertical;
-ms-box-orient: vertical;
-moz-box-orient:vertical;
-webkit-box-orient: vertical;
overflow-y:scroll;
-moz-box-sizing: inherit;
box-flex: 0;
-ms-box-flex: 0;
-moz-box-flex: 0;
-webkit-box-flex: 0;
-moz-box-lines:multiple;
}
In Firefox I want it to scroll with overflow:auto and to stop the flex box from expanding vertically. Setting box-flex: 0; is not working.
Any suggestions on how to achieve this?

Answer 1

I had a similar problem with vertical scrolling on a flex box in Firefox. When content overflowed vertically, Firefox would display scrollbar gutters, but no scroll handle, and the content box remained fixed and unscrollable.
I solved the issue by simply adding a min-height to the box with the flex-box property. I needed to set a min-height anyway, but you can hack in min-height:1px in any case.
I have only tested this behavior in Firefox 13, YMMV.

Answer 2

Flex boxes are pretty quirky in Firefox right now, it's a little unrefined. There's a known issue that they don't work under fixed or absolute positioned elements. Also let it be known that for flex boxes to work in Firefox, there HAS to be a width, or else it'll just be treated as an inline block.