Html Firefox中的Flexbox溢出问题

我被一个使用flexbox的测试项目卡住了。我们的目标是构建一个仪表板，其中包含一些卡片列表，并排无限溢出

我设法做到了这一点，问题是：这些列表中的每一个都有一个页眉、一个卡片列表和一个页脚，列表的高度不能超过父级可用的高度。如果发生这种情况，列表只能在卡列表上应用溢出

在chrome上它工作得很好，但在firefox上。。。看起来渲染器无法处理这样的内容溢出的可能性！我真的对这个很生气

例如：

代码（同时打开）

//代码在这里
（功能（角度）{
角度模块（“应用程序”，[]）；
角度。模块（“app”）。控制器（“AppController”，AppController）；
AppController.$inject=[“$scope”]；
函数AppController（$scope）{
var ctrl=this；
ctrl.addCard=函数（列表）{
list.cards.push（{title:“Card”+（list.cards.length+1）}）；
};
ctrl.List=[
{
标题：“清单1”，
卡片：[
{标题：“卡1”}，
{标题：“卡片2”}，
{标题：“卡片3”}，
{标题：“卡片4”}，
{标题：“卡片5”}
]
},
{
标题：“清单2”，
卡片：[
{标题：“卡1”}，
{标题：“卡片2”}，
{标题：“卡片3”}，
{标题：“卡片4”}，
{标题：“卡片5”}，
{标题：“卡片6”}，
{标题：“卡片7”}，
{标题：“卡片8”}，
{标题：“卡片9”}，
{标题：“卡片10”}，
{标题：“卡片11”}，
{标题：“卡片12”}，
{标题：“卡片13”}，
{标题：“卡片14”}，
{标题：“卡片15”}，
{标题：“卡片16”}，
{标题：“卡片17”}，
{标题：“卡片18”}，
{标题：“卡片19”}，
{标题：“卡片20”}
]
},
{
标题：“清单3”，
卡片：[
{标题：“卡1”}，
{标题：“卡片2”}，
{标题：“卡片3”}，
{标题：“卡片4”}，
{标题：“卡片5”}
]
},
{
标题：“清单4”，
卡片：[
{标题：“卡1”}，
{标题：“卡片2”}，
{标题：“卡片3”}，
{标题：“卡片4”}，
{标题：“卡片5”}
]
},
{
标题：“清单5”，
卡片：[
{标题：“卡1”}，
{标题：“卡片2”}，
{标题：“卡片3”}，
{标题：“卡片4”}，
{标题：“卡片5”}
]
}
];
}
}（角度））

html，正文{
身高：100%；
保证金：0；
填充：0；
宽度：100%；
}
.集装箱{
显示：-网络工具包盒；
显示：-webkit flex；
显示器：-moz盒；
显示：-ms flexbox；
显示器：flex；
-webkit柔性方向：列；
-moz-flex方向：列；
弯曲方向：立柱；
浮动：列；
身高：100%；
保证金：0；
最大高度：100%；
最大宽度：100%；
填充：0；
宽度：100%；
}
.货柜.货柜头{
背景：红色；
填充：10px；
-webkit-flex-grow:0；
-moz-flex-grow:0；
flex-grow:0；
}
.container.container head.header标题{
保证金：0；
填充：0；
}
.容器.容器体{
背景：绿色；
显示：-网络工具包盒；
显示：-webkit flex；
显示器：-moz盒；
显示：-ms flexbox；
显示器：flex；
-webkit柔性方向：列；
-moz-flex方向：列；
弯曲方向：立柱；
-webkit-flex-grow:1；
-moz-flex-grow:1；
柔性生长：1；
填充物：5px；
}
.container.container body.view{
背景：蓝色；
框大小：边框框；
显示：-网络工具包盒；
显示：-webkit flex；
显示器：-moz盒；
显示：-ms flexbox；
显示器：flex；
浮动：左；
溢出-x：自动；
填充：0；
-webkit-flex-grow:1；
-moz-flex-grow:1；
柔性生长：1；
}
.container.container body.view.list块{
框大小：边框框；
背景：深蓝色；
显示：内联块；
flex:0自动；
浮动：左；
保证金：0；
填充物：5px；
宽度：280px；
最小高度：0；
}
.container.container body.view.list块.list{
背景：darkorange；
边界半径：4px；
显示：-网络工具包盒；
显示：-webkit flex；
显示器：-moz盒；
显示：-ms flexbox；
显示器：flex；
-webkit柔性方向：列；
-moz-flex方向：列；
弯曲方向：立柱；
浮动：左；
最大高度：100%；
保证金：0；
最小高度：0；
最小宽度：0；
宽度：100%；
}
.container.container body.view.list block.list.list header{
背景：橙色；
边框左上半径：4px；
边框右上角半径：4px；
边框底部：1px实心暗色；
-webkit flex增长：0 0自动；
-moz flex增长：0 0自动；
弹性增长：0 0自动；
浮动：左；
高度：自动；
填充：10px；
}
.container.container body.view.list block.list.list卡片{
背景：橙色；
边框底部：1px实心暗色；
显示：-网络工具包盒；
显示：-webkit flex；
显示器：-moz盒；
显示：-ms flexbox；
显示器：flex；
-webkit柔性方向：列；
-moz-flex方向：列；
弯曲方向：立柱；
浮动：左；
最大高度：100%；
溢出y：自动；
填充物：5px；
}
.container.container body.view.list block.list.list cards.card{
背景#ffc107；
边界半径：4px；
浮动：左；
保证金：5px；
填充：10px；
}
.container.container-body.view.list-block.list.list-cards.card:hover{
背景#fdc002；
}
.container.container body.view.list block.list.list footer{
背景：橙色；
边框左下半径：4px；
边框右下半径：4px；
-webkit-flex-grow:0；
-moz-flex-grow:0；
flex-grow:0；
高度：自动；
填充：10px；
浮动：左；
文本对齐：居中；
}

柔性箱
{{list.title}
{{card.title}
.container .container-body {
  min-height: 0;
}