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> 

希望這有助於..

保重，快樂編碼