Html 无法在Firefox中滚动溢出flex容器

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

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

预期布局：

.container{
底部：0；
左：0；
右：0；
排名：0；
位置：固定；
显示器：flex；
弯曲方向：立柱；
}
.标题{
背景：绿色；
高度：100px；
flex:0100px；
}
.内容{
显示器：flex；
}
.左栏{
背景：红色；
弹性：1；
}
.右栏{
背景：蓝色；
弹性：4；
溢出：自动；
}

标题
左列
右栏1
右栏2
右栏3
右栏4
右栏5
右栏6
右栏7
右栏8
右栏9
右栏10
右栏11
右栏12
右栏
列13
右列14
右列15
右列16
右列17
右列18
右列19
右列20
右列21
右列22
右列23
右列24
右栏25
右栏26
右栏27
右栏28
右栏29
右栏30
右栏31
右栏32
右栏33
右栏34
右栏35

36
右栏37
右栏38
右栏39
右栏40
右栏41
右栏42
右栏43
右栏44
右栏45
右栏46
右栏47

列48
右列49
右列50
右列51
右列52
右列53
右列54
右列55
右列56
右列57
右列58
右列59
右栏60
右栏61
右栏62
右栏63
右栏64
右栏65
右栏66
右栏67
右栏68
右栏69
右栏70
右栏
71
右栏72
右栏73
右栏74
右栏75
右栏76
右栏77
右栏78
右栏79
右栏80
右栏81
右栏82

列83
右列84
右列85
右列86
右列87
右列88
右列89
右列90
右列91
右列92
右列93
右列94
右栏95
右栏96
右栏97
右栏98
右栏99
右栏100

您是否尝试过使用供应商前缀？我通过AutoRefixer运行了您的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);
}

---

您是否尝试过使用供应商前缀？我通过AutoRefixer运行了您的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);
}

---

将

最小高度：0

添加到

.content

。将

最小高度：0

添加到

.content

。