HTML displaced select options


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. ?


<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>


    -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;


Problem courtesy of: sitilge


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

Solution courtesy of: i alarmed alien


There is currently no discussion for this recipe.

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