无法在Firefox中滚动溢出Flex容器

Question

我尝试使用CSS3 flexbox（标题栏，侧边栏和内容）创建类似布局的应用程序，其中只有内容包装器应该具有比可见区域更大的内容并且可以滚动但是由于某种原因这种行为是仅适用于Google Chrome或Safari，但不适用于Firefox。

我误解了什么？或者在Firefox中有什么具体的事情可以使它工作吗？

预期布局：

＆＃13;

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

感谢

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);
}