無法滾動Firefox中的溢出柔性容器

Question

我試圖創建一個像CSS3柔性盒（標題欄，邊欄和內容）的佈局應用程序，其中只有內容包裝應具有比可見區域更大的內容並且可滾動但出於某種原因，此行爲僅適用於Google Chrome或Safari，而不適用於Firefox。

我誤解了什麼？或者是否有任何具體的事情要做在Firefox的工作？

預計的佈局：

.container { 
 
    bottom: 0; 
 
    left: 0; 
 
    right: 0; 
 
    top: 0; 
 
    position: fixed; 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 

 
.header { 
 
    background: green; 
 
    height: 100px; 
 
    flex: 0 0 100px; 
 
} 
 

 
.content { 
 
    display: flex; 
 
} 
 

 
.left-column { 
 
    background: red; 
 
    flex: 1; 
 
} 
 

 
.right-column { 
 
    background: blue; 
 
    flex: 4; 
 
    overflow: auto; 
 
}

<div class="container"> 
 
    <div class="header"> 
 
    header 
 
    </div> 
 
    <div class="content"> 
 
    <div class="left-column"> 
 
     left column 
 
    </div> 
 
    <div class="right-column"> 
 
     right column 1<br />right column 2<br />right column 3<br />right column 4<br />right column 5<br />right column 6<br />right column 7<br />right column 8<br />right column 9<br />right column 10<br /> right column 11<br />right column 12<br />right 
 
     column 13<br />right column 14<br />right column 15<br />right column 16<br />right column 17<br />right column 18<br />right column 19<br />right column 20<br /> right column 21<br />right column 22<br />right column 23<br />right column 24<br 
 
     />right column 25<br />right column 26<br />right column 27<br />right column 28<br />right column 29<br />right column 30<br /> right column 31<br />right column 32<br />right column 33<br />right column 34<br />right column 35<br />right column 
 
     36<br />right column 37<br />right column 38<br />right column 39<br />right column 40<br /> right column 41<br />right column 42<br />right column 43<br />right column 44<br />right column 45<br />right column 46<br />right column 47<br />right 
 
     column 48<br />right column 49<br />right column 50<br /> right column 51<br />right column 52<br />right column 53<br />right column 54<br />right column 55<br />right column 56<br />right column 57<br />right column 58<br />right column 59<br 
 
     />right column 60<br /> right column 61<br />right column 62<br />right column 63<br />right column 64<br />right column 65<br />right column 66<br />right column 67<br />right column 68<br />right column 69<br />right column 70<br /> right column 
 
     71<br />right column 72<br />right column 73<br />right column 74<br />right column 75<br />right column 76<br />right column 77<br />right column 78<br />right column 79<br />right column 80<br /> right column 81<br />right column 82<br />right 
 
     column 83<br />right column 84<br />right column 85<br />right column 86<br />right column 87<br />right column 88<br />right column 89<br />right column 90<br /> right column 91<br />right column 92<br />right column 93<br />right column 94<br 
 
     />right column 95<br />right column 96<br />right column 97<br />right column 98<br />right column 99<br />right column 100<br /> 
 
    </div> 
 
    </div> 
 
</div>

感謝

Answer 1

您是否嘗試過使用供應商前綴？我通過Autoprefixer運行你的CSS：

  .container { 
       bottom: 0; 
       left: 0; 
       right: 0; 
       top: 0; 
       position: fixed;     
       display: -webkit-box;     
       display: -ms-flexbox;     
       display: flex; 
       -webkit-box-orient: vertical; 
       -webkit-box-direction: normal; 
        -ms-flex-direction: column; 
         flex-direction: column; 
      } 
      .header { 
       background: green; 
       height: 100px; 
       -webkit-box-flex: 0; 
        -ms-flex: 0 0 100px; 
         flex: 0 0 100px; 
      } 
      .content { 
       display: -webkit-box; 
       display: -ms-flexbox; 
       display: flex; 
      } 
      .left-column { 
       background: red; 
       -webkit-box-flex: 1; 
        -ms-flex: 1; 
         flex: 1; 
      } 
      .right-column { 
       background: blue; 
       -webkit-box-flex: 4; 
        -ms-flex: 4; 
         flex: 4; 
       overflow: auto; 
      } 

.example { 
    display: -webkit-box; 
    display: -ms-flexbox; 
    display: flex; 
    -webkit-transition: all .5s; 
    transition: all .5s; 
    -webkit-user-select: none; 
     -moz-user-select: none; 
     -ms-user-select: none; 
      user-select: none; 
    background: -webkit-gradient(linear, left top, left bottom, from(white), to(black)); 
    background: linear-gradient(to bottom, white, black); 
}