Css Firefox在使用flex时忽略元素的宽度属性

我正在尝试使用不同的flex和width属性对齐一些元素。在Safari和Chrome中，行为与预期一致，但在firefox中则不然

似乎忽略了width属性，即使您将元素的宽度设置为非常高的固定值

请参见此处的示例：

所需的行为是将两个div包装在类“r-6”中，它们都覆盖其父类的整个宽度（这在Firefox和Chrome中发生）

在firefox中，两个div相邻对齐，即使宽度设置为100%。您也可以尝试将这个类的宽度设置为10000px，但它仍然只占用其父div的一半空间

Html设置：

<div class="layout-row">
    <div class="c-l-8">
        <div class="layout-col h-800">
            <div class="r-6">
                 <div class="one"></div>
            </div>
            <div class="r-6">
                 <div class="two"></div>
            </div>
        </div>
    </div>
</div>

试试这个代码

<style>

        .layout-row,
        .layout-col {
            display: -webkit-box;
            display: -moz-box;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;
        }

        .layout-row {
            flex-flow: row wrap;
            width: 100vw;
        }

        .layout-col {
            flex-flow: column wrap;
        }

        .c-l-8 {
            width: 100%;
        }

        .r-6 {
            width: 100%;
            height: 50%;
        }

        .h-800 {
            height: 800px;
        }

        .one,
        .two {
            width: 100%;
            height: 100%;
        }

        .one {
            background: red;
        }

        .two {
            background: blue;
        }

  </style>

.布局行，
.布局栏{
显示：-网络工具包盒；
显示器：-moz盒；
显示：-ms flexbox；
显示：-webkit flex；
显示器：flex；
}
.布局行{
柔性流：行换行；
宽度：100vw；
}
.布局栏{
柔性流：柱包裹；
}
.c-l-8{
宽度：100%；
}
r-6先生{
宽度：100%；
身高：50%；
}
.h-800{
高度：800px；
}
.1，
.二{
宽度：100%；
身高：100%；
}
.一{
背景：红色；
}
.二{
背景：蓝色；
}

希望这有帮助

---

小心并愉快地编码

使用flex流而不是-webkit flex流解决了问题：）乐意帮助。。。请确保在最后有泛型声明，因为如果浏览器已开始接受泛型请求，则此声明将生效，否则特定于浏览器的实现仍将有效。。。

<style>

        .layout-row,
        .layout-col {
            display: -webkit-box;
            display: -moz-box;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;
        }

        .layout-row {
            flex-flow: row wrap;
            width: 100vw;
        }

        .layout-col {
            flex-flow: column wrap;
        }

        .c-l-8 {
            width: 100%;
        }

        .r-6 {
            width: 100%;
            height: 50%;
        }

        .h-800 {
            height: 800px;
        }

        .one,
        .two {
            width: 100%;
            height: 100%;
        }

        .one {
            background: red;
        }

        .two {
            background: blue;
        }

  </style>