Getting boxes to same width in Firefox using -moz-box

I am using the following css to get three evenly spaced and s开发者_Python百科ized boxes with a flexible width:

.box {
    display: -moz-box;
    display: -webkit-box;
    display: box;
    width: 100%;
    text-align: justify;
    margin: 20px 0;
}

.box1, .box2, .box3 {
    -moz-box-flex: 1;
    -webkit-box-flex: 1;
    box-flex: 1;
    width: 30%;
    padding: 5px;
}

.box2, .box3 {  
    margin-left: 20px;
}

The html is in the form:

<div class="box">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</div>

You can see the page I am using this on here.

This works fine in Safari, but in Firefox the width of the boxes are not even. Rather the first box in each row is just wide enough to fit the content and the second two boxes take up the rest of the width. I wonder if someone could help me with this CSS to get it working in Firefox.

Thanks,

Nick

---

Seems that width:0 is the current way to lay out flexible boxes (from http://hotmeteor.com/2011/04/22/equals-widths-using-the-css3-flexible-box-layout-module/)

Changing the .box1, .box2, .box3 CSS selector's width:30% to width:0 fixes Firefox layout and still works in Chrome.