HTML displaced select options

Problem

The code below seems to be working on the first sight, however FF (currently testing on FF26) is displacing the select options and not working afterwards (unable to choose the option). No problems in Chrome 35. Is this a FF bug, maybe partial support for flexbox, etc. ?

HTML

<div class="order-item-new">
 <select id="item" class="select" form="order-form" name="order[]">
  <option value="1">One</option>
  <option value="2">Two</option>
 </select>
</div>

CSS

.order-item-new
{
    -moz-box-direction: normal;
    -moz-box-flex: 0;
    -moz-box-orient: horizontal;
    -moz-box-pack: center;
    background: linear-gradient(to right, rgba(255, 255, 255, 0.15) 18%, rgba(61, 145, 153, 0.15) 50%, rgba(255, 255, 255, 0.15) 84%) repeat scroll 0 0 rgba(0, 0, 0, 0);
    display: flex;
    flex: 0 1 45px;
    flex-direction: row;
    justify-content: center;
    text-align: center;
}

.order-item-new select
{
    -moz-box-flex: 0;
    flex: 0 1 120px;
    margin: 7px 10px;
}

Example: http://jsfiddle.net/wJ4H9/10/

Problem courtesy of: sitilge

Solution

From caniuse.com, Firefox 30 and later support flexbox, but earlier versions do not.

Solution courtesy of: i alarmed alien

Discussion

There is currently no discussion for this recipe.

This recipe can be found in it's original form on Stack Over Flow.