Css Firefox和Chrome在使用flex grow时显示不同的结果

我已经建立了一个简单的菜单系统，当在不同的浏览器中使用时，它会显示不同的结果

使用Chrome时，实际的菜单div会正确拉伸，以填充父div菜单容器的剩余空间

根据我的研究，问题在于实际菜单div中的flex增长

我试图创建一个简单的代码笔片段来说明我的问题

代码段应该全屏运行（将菜单显示为一行）

先谢谢你

正文{
保证金：0；
背景色：黑色；
}
.菜单容器{
位置：相对位置；
边缘顶部：50px；
右边距：自动；
左边距：自动；
宽度：59%；
高度：75px；
显示：-网络工具包盒；
显示：-ms flexbox；
显示器：flex；
}
.菜单容器.菜单徽标{
宽度：220px；
身高：100%；
背景图像：url（“https://via.placeholder.com/220x75.png");
-webkit-box-flex:0；
-ms-flex：无；
flex：无；
}
.菜单容器.菜单社交{
位置：绝对位置；
flex：无；
排名：0；
右：0；
}
.菜单容器.菜单社交img{
右侧填充：5px；
}
.菜单容器.实际菜单{
位置：相对位置；
背景色：白色；
边界半径：24px 0 0 24px；
底部：0；
高度：45px；
宽度：自动；
显示：表格；
-webkit-box-flex:1；
-ms-flex:1；
弹性：1；
最高：35%；
左边距：5px；
}
.菜单容器ul.菜单链接{
显示：表格单元格；
垂直对齐：中间对齐；
宽度：100%；
保证金：自动；
}
.菜单容器ul.菜单链接li{
显示：内联；
文本转换：大写；
右侧填充：30px；
字号：16pt；
字号：2vh；
}

试验
试验
试验
试验
试验
试验
试验

问题不在于

flex grow

属性，而在于

实际菜单

具有

显示：表

。如果您通读的答案和注释，您会发现，简而言之，直接将表用作flex子级是一个坏主意

我能看到的是，您使用表格布局只是为了实现菜单项的文本居中。但是，既然您已经在布局的其他部分使用flexbox，为什么不在这里使用它，就像这样：

正文{
保证金：0；
背景色：黑色；
}
.菜单容器{
位置：相对位置；
边缘顶部：50px；
右边距：自动；
左边距：自动；
宽度：59%；
高度：75px；
显示：-网络工具包盒；
显示：-ms flexbox；
显示器：flex；
}
.菜单容器.菜单徽标{
宽度：220px；
身高：100%；
背景图像：url（“https://via.placeholder.com/220x75.png");
-webkit-box-flex:0；
-ms-flex：无；
flex：无；
}
.菜单容器.菜单社交{
位置：绝对位置；
flex：无；
排名：0；
右：0；
}
.菜单容器.菜单社交img{
右侧填充：5px；
}
.菜单容器.实际菜单{
位置：相对位置；
背景色：白色；
边界半径：24px 0 0 24px；
底部：0；
高度：45px；
宽度：自动；
显示器：flex；
-webkit-box-flex:1；
-ms-flex:1；
弹性：1；
最高：35%；
左边距：5px；
}
.菜单容器ul.菜单链接{
宽度：100%；
保证金：自动；
}
.菜单容器ul.菜单链接li{
显示：内联；
文本转换：大写；
右侧填充：30px；
字号：16pt；
字号：2vh；
}

试验
试验
试验
试验
试验
试验
试验

谢谢。我也发现了桌子的问题，并以类似于您的方式解决了它。再次感谢。