Scroll not working with CSS3 flex box in Firefox

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.