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

Question

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

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

这里参见例如： 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> 

希望这有助于..

保重，快乐编码