最大宽度在 Firefox 的灵活盒子模型中不起作用？

Question

我正在尝试使用新的 css3 flexbox 模型进行布局。我想要一个占据 100% 高度的页面，使用固定的页脚和页眉，其余内容位于中间的一列上。内容列应占据 100% 的宽度，直至固定的最大宽度。此外，一切都应该在中心对齐。

我设法完全按照 这个演示 中的规范构建它，它在 chrome 或任何基于 webkit 的浏览器。但在 Firefox 中，它会出现问题，添加“max-width”属性会使所有内容成为左对齐的固定列。

谁能告诉我为什么这在 Firefox 中不起作用？这是对规范的不同解释，还是我的代码中的错误？

这是演示的 HTML：

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

这是 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; }

Answer 1

您在 Gecko 中使用的是 XUL Flexbox 模型，它与您显然正在阅读的旧 CSS Flexbox 草稿无关（这也与当前的 Flexbox 草稿无关，后者使用完全不同的显示值， ETC）。

特别是， display: -moz-box 已经存在了 10 多年，并且具有任何它所具有的行为，而您正在阅读的 Flexbox 草案要更新得多，并且具有与 完全不同的行为>-moz-box 行为。 WebKit flexbox 实现晚于第一个 W3C 草案或与它们同时进行，因此更接近这些草案所讨论的内容。但同样，当前的草案与早期的草案完全不同......