`flex-basis：auto` size parent就好像孩子是`flex-basis：auto`，当孩子是`flex-basis：10px`

Question

例如，您不应该在这里看到父级的红色，但是您可以这样做，因为parent: 0 0 auto正在将父级调整为其子级内容的自动宽度。 你可以清楚地看到，它的内容的实际宽度是10px，所以它的自动调整大小不应该使父10px也是如此吗？

 body{ display:flex; } #parent { flex: 0 0 auto; background-color: red; } #child { flex: 0 0 10px; background-color: grey; } div{ display:flex; min-width:0; min-height:0; overflow:hidden; } /*There's some weirdness described here, http://stackoverflow.com/questions/36247140/why-doesnt-flex-item-shrink-past-content-size where flex elements default to min-width:auto, which could have caused problems here, but this doesn't change anything, so apparently this is not the issue*/ 

 <div id="parent"> <div id="child">childcontents</div> </div> 

这发生在firefox和chrome中，因此可能会以某种方式证明这是正确的 。 我想知道怎么做，所以我可以阻止它。

Answer 1

根据我对规范的理解，这是一个bug。

Michael_B所说的是正确的，首先#parent是大小的，一旦知道宽度， #child就可以弯曲。 由于弯曲通常涉及生长或收缩，因此在弯曲柔性物品之前必须知道柔性容器的尺寸; 并且flex项的最终大小可能不是flex基础，因此不应使用该值来调整flex容器的大小。

解决方案很简单：使用width而不是flex-basis 。 width不会弯曲，因此它不依赖于容器的宽度。 因此，容器在width确定时可以使用其内容物的width 。

 body { display: flex; } #parent { flex: none; background-color: red; } #child { width: 10px; flex: none; background-color: grey; } div { display: flex; min-width: 0; min-height: 0; overflow: hidden; } 

 <div id="parent"> <div id="child">childcontents</div> </div> 

也就是说， 在你的情况下使用flex-basis应该可行 。 这是因为您的弹性项目具有零弹性增长因子和零弹性收缩系数。 它不会生长也不会缩小，它会直接冻结。 因此，在调整父级的大小时，可以考虑使用flex-basis ，并且规范如此说明：

9.9.3。 Flex项目内在大小贡献

Flex项目的主要大小最小内容 / 最大内容贡献是其外部 最小内容 / 最大内容大小 ，由其弹性基本大小作为最大值（如果它不可增长）和/或最小值限制（如果它不可收缩），然后通过其最小 / 最大主尺寸属性进一步夹紧。

不可弯曲的不可收缩的柔性物品的贡献被其柔性基部尺寸钳制为最大值和最小值。 也就是说，贡献恰好是弹性基础大小，其定义为弹性基础确定时的弹性基础。

Answer 2

看起来flex布局算法在到达flex项的宽度之前计算flex容器的宽度。

因此，它决定了auto的大小#parent基于的全宽#child 。

然后它将#child大小#child为flex-basis: 10px 。

然而，在他的观点上，父母的auto宽度已经确定并且不灵活。

在Chrome中进行测试，重新安排规则没有任何区别，因此它似乎不是一个级联问题。

这是我对行为的看法，没有正式的参考支持。 您可以在这里找到准确的答案： W3C规范：Flex布局算法