当使用flex时，Firefox会忽略元素的width属性

Question

I am trying to align some elements using different flex and width properties. In Safari and Chrome the behavior is as expected, but in firefox it is not.

It seems that the width property gets ignored, even though you set the width of the element to a very high, fixed value.

See example here: https://jsfiddle.net/wugrtwjc/

The desired behavior is to have the two divs wrapped in the class "r-6" under each other, both covering the whole width of their parent (This is happening in Firefox and Chrome).

In firefox the two divs is aligned next to each other even though the width is set to 100%. You can also try to set the width of this class to something like 10000px, but it will still only take up half of the space of its parent div.

Html setup:

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

CSS:

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

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

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

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

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

.h-800 {
  height: 800px;
}

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

.one {
  background: red;
}

.two {
  background: blue;
}

Answer 1

try this code

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

Hope this helps..

Take care and happy coding