Max width doesn't work in a flexible box model in firefox?

I'm trying to make a layout using the new css3 flexbox model. I want a page that occupies 100% of the height, using has a fixed footer and header and the remaining content is on a column in the middle. The content column should occupy 100% of the width up to a fixed maximun width. Also, everything should be aligned in the center.

I managed to build it exactly to spec in this demo wich works great in chrome or any webkit based browser. But it breaks in firefox, where adding the "max-width" property makes everything a fixed column aligned to the left.

Can anyone enlight me on why this is not working in firefox? Is it a different interpretation of the spec, or is it an error in my code?

This is the HTML of 开发者_Python百科the demo:

    <div class="container">
        <div class="header">Header</div>
        <div class="content">   
            <div class="fixed">
                <h1>Title</h1>
                <div class="someText">
                    <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vehicula sodales risus quis rhoncus. Donec suscipit lorem ante. Nullam tempor, lorem sit amet faucibus dictum, est nisl aliquam felis, a tempor arcu massa sit amet felis. Donec a blandit mi. Sed posuere, lacus eu scelerisque porttitor, turpis sem aliquam nulla, ut rutrum sem libero a felis. Morbi nec sodales odio. Nulla facilisi. Sed consectetur pellentesque arcu, in laoreet nulla semper ac. Pellentesque vulputate sem eget eros condimentum in malesuada dui convallis. Vivamus tristique velit id justo laoreet vestibulum. Nulla orci nisl, vulputate vitae facilisis sit amet, ultricies id massa. Sed eget faucibus magna. Integer a leo sem, hendrerit fermentum libero.</p>
                    <p>In gravida faucibus dui, quis bibendum est ornare nec. Cras ac metus a dui rhoncus mattis. Nulla ut hendrerit est. Cras sed sem felis, venenatis tincidunt ipsum. Vestibulum id sodales ligula. Nunc sit amet neque vel ante aliquam commodo. Aenean elit felis, imperdiet sagittis lacinia ut, tincidunt accumsan arcu. Vivamus dapibus ligula a est convallis eget tincidunt libero interdum. Nunc mattis, odio et tincidunt egestas, orci ante pharetra nulla, hendrerit ultrices nunc ipsum nec sem. Vestibulum egestas leo pulvinar massa mollis sit amet dapibus velit venenatis. Etiam molestie posuere lacinia. Nam ut nulla elit, ac tincidunt tellus. Nulla mollis metus id ante accumsan et mattis est ultricies. Morbi nec nunc nulla. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                </div>
            </div>
        </div>
        <div class="footer">
            <div class="fixed">Footer</div>
        </div>
    </div>

and this is the CSS:

            body, html {
                width: 100%;
                height: 100%;
                padding: 0;
                margin: 0;
                background:black;
            }

            .container {
                height: 100%;
                width: 100%;
                display: -webkit-box;
                -webkit-box-orient: vertical;

                display: -moz-box;
                -moz-box-orient: vertical;

            }

            .header, .footer {
                background-color: #32403C;
                height: 40px;
                width: 100%;
                margin: 0;
                line-height: 40px;
                vertical-align: middle;
                text-align: center;
                color: #FFF;
                -webkit-box-pack: center;
                -moz-box-pack: center;
                box-pack: center;   
                display: -moz-box;
                display: -webkit-box;
                -webkit-box-flex: 0;    
            }


            .content {
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-box-flex: 1;

                display: -moz-box;
                -moz-box-orient: vertical;
                -moz-box-flex: 1;

                -webkit-box-align:center;
                -moz-box-align:center;
                box-align:center;

                -webkit-box-pack: center;
                -moz-box-pack: center;
                box-pack: center;   
            }

            .fixed {
                background:#787;
                -moz-box-flex: 1;
                -webkit-box-flex: 1;
                box-flex: 1;
                width:100%;
                max-width:480px;
                overflow:hidden;
                display: -webkit-box;
                display: -moz-box;
                -webkit-box-orient: vertical;
                -moz-box-orient: vertical;
            }

            .someText {
                -webkit-mask-image: -webkit-linear-gradient( black, black 75%, transparent 95%);
                -moz-box-flex: 1;
                -webkit-box-flex: 1;
                box-flex: 1;
                overflow:scroll;    

            }

            .content {  background: #876; }
            .colorLight { background-color: #A6687B; }
            .colorMedium { background-color: #8C605F; }
            .colorDark { background-color: #735E5A; }

---

What you're using in Gecko there is the XUL flexbox model, which has nothing to do with the old CSS flexbox drafts you were apparently reading (which also have nothing to do with the current flexbox drafts, which use a totally different display value, etc).

In particular, display: -moz-box has been around for 10+ years and has whatever behavior it has, while the flexbox draft you were reading is much newer and has behavior that's quite different from the -moz-box behavior. The WebKit flexbox implementation postdates the first W3C drafts or is contemporaneous with them, so is closer to what those drafts talks about. But again, the current drafts are completely different from those early ones...