Css 为什么flex容器“flex:10 0px”在Chrome上崩溃？

在Chrome上，我遇到了我不理解的Flexbox行为。当flex子级（也是flex容器）具有

flex:10 0px

时，它会折叠自身及其内容

即使

flex basis

设置为

0px

，但据我所知，将

flex grow

设置为

1

（flex速记中的第一个数字）应能在需要时使项目增长

在我的示例中，

.bottomcontainer

将

高度设置为
300px
。在Firefox上，高度
受到尊重，但在Chrome上，高度降低到
0px
。为什么?


.top容器{
显示器：flex；
柔性流动：柱状nowrap；
}
.中间容器{
flex:100px；
显示器：flex；
柔性流动：柱状nowrap；
}
.底部容器{
flex:0自动；
高度：300px；
}
问题在于
flex basis
组件

当您有
flex-basis:0
时，Chrome和Firefox将计算到
flex-basis:0px

但是，像素值会破坏Chrome中的布局

相反，为了实现跨浏览器兼容性，请使用以下选项：

flex: 1 0 0%

好的，逻辑是这样的

您没有指定高度
。顶部容器
，因此它的子元素（
。中间容器
）无法增长，因为尽管有
flex:1 0
，但它们没有空间增长到，
.middle container
元素将始终保持0的高度。
Flex:1 0告诉<代码>弹性基础：0，我想说，chrome有正确的行为：（@G-Cyr:但是不设置
flex grow:1
应该在需要时使项目可增长吗？有时我需要设置
flex basis:0
，以确保所有flex子项的大小完全相同。这是不一致的，将其大小调整为零并允许其同时增长，对flex basis值使用auto，然后每个flex设置都像e一样工作预期的；）它类似于：宽度：0；最大宽度：100%；中存在冲突logic@G-Cyr：是的，flex:1 0 0 0 0 0肯定不是它想要完成什么的明确声明。但它是一个有效的声明-基本大小是0px，然后增长到使用所有剩余空间-我不明白为什么它不起作用。flex中没有指导box spec关于浏览器应该如何在
flex基础上解释不同的单位
值。即使你是正确的，我也不建议使用无单位值，这是一个有效的声明。我不明白的部分是为什么
px
值会破坏Chrome中的布局？Chrome是如何呈现
px
vs
%
单位的。忘记about
flex basis
一分钟。改为使用
height
。同样的事情。Chrome/Safari和Firefox有不同渲染高度的历史，特别是在flex容器中。@Michael_B：好的，我看到了，谢谢。现在我正试着想办法：）我还说，浏览器正在从传统的规范解释演变而来，并考虑到其他形式的高度。在Chrome和FF之间的flex渲染行为中，我可以立即计算出至少6个差异。为什么，你问？我只能猜测。