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

Question

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

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

请参见此处的示例： https://jsfiddle.net/wugrtwjc/

期望的行为是将两个 div 包裹在“r-6”类中，并在彼此下方，都覆盖其父级的整个宽度（这在 Firefox 和 Chrome 中发生）。

在 firefox 中，即使宽度设置为 100%，两个 div 也会彼此相邻对齐。您也可以尝试将此类的宽度设置为 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>

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

试试这个代码

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

希望这会有所帮助..

保重并快乐编码