[英]`flex-basis: auto` sizes parent as if child were `flex-basis: auto`, when child is `flex-basis:10px`
For example, you shouldn't be able to see the red of the parent here, but you do, because parent: 0 0 auto
is sizing the parent to the auto width of its child content. 例如,您不应该在这里看到父级的红色,但是您可以这样做,因为
parent: 0 0 auto
正在将父级调整为其子级内容的自动宽度。 You can see clearly though, the real width of its content is 10px, so shouldn't its auto sizing make the parent 10px as well? 你可以清楚地看到,它的内容的实际宽度是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>
This occurs in firefox and chrome, so presumably this is going to turn out to be correct somehow. 这发生在firefox和chrome中,因此可能会以某种方式证明这是正确的 。 I'd like to know how, so that I can stop it.
我想知道怎么做,所以我可以阻止它。
According to my understanding of the spec, this is a bug. 根据我对规范的理解,这是一个bug。
What Michael_B said is correct, first #parent
is sized, and once its width is know, #child
can flex. Michael_B所说的是正确的,首先
#parent
是大小的,一旦知道宽度, #child
就可以弯曲。 Since flexing usually involves growing or shrinking, the size of the flex container must be known before flexing the flex item; 由于弯曲通常涉及生长或收缩,因此在弯曲柔性物品之前必须知道柔性容器的尺寸; and the final size of the flex item may not be the flex basis, so the flex container shouldn't be sized using that value.
并且flex项的最终大小可能不是flex基础,因此不应使用该值来调整flex容器的大小。
The solution is easy: use width
instead of flex-basis
. 解决方案很简单:使用
width
而不是flex-basis
。 width
does not flex, so it doesn't depend on the width of the container. width
不会弯曲,因此它不依赖于容器的宽度。 Thus the container can use the width
of their contents when sized. 因此,容器在
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>
That said, in your case using flex-basis
should work . 也就是说, 在你的情况下使用
flex-basis
应该可行 。 That's because your flex item has both a zero flex grow factor and a zero flex shrink factor. 这是因为您的弹性项目具有零弹性增长因子和零弹性收缩系数。 It cannot grow nor shrink, it becomes directly frozen.
它不会生长也不会缩小,它会直接冻结。 Therefore it's possible to use consider the
flex-basis
when sizing the parent, and the spec says so: 因此,在调整父级的大小时,可以考虑使用
flex-basis
,并且规范如此说明:
9.9.3.
9.9.3。 Flex Item Intrinsic Size Contributions
Flex项目内在大小贡献
The main-size min-content / max-content contribution of a flex item is its outer min-content / max-content size , clamped by its flex base size as a maximum (if it is not growable) and/or as a minimum (if it is not shrinkable), and then further clamped by its min / max main size properties .
Flex项目的主要大小最小内容 / 最大内容贡献是其外部 最小内容 / 最大内容大小 ,由其弹性基本大小作为最大值(如果它不可增长)和/或最小值限制(如果它不可收缩),然后通过其最小 / 最大主尺寸属性进一步夹紧。
The contribution of the ungrowable unshrinkable flex item is clamped by its flex base size both as a maximum and as a minimum. 不可弯曲的不可收缩的柔性物品的贡献被其柔性基部尺寸钳制为最大值和最小值。 That is, the contribution is exactly the flex base size, which is defined as the flex basis when the flex basis is definite.
也就是说,贡献恰好是弹性基础大小,其定义为弹性基础确定时的弹性基础。
It looks like the flex layout algorithm calculates the width of the flex container before arriving at the width of the flex items. 看起来flex布局算法在到达flex项的宽度之前计算flex容器的宽度。
Hence, it determines the auto
size of #parent
based on the full width of #child
. 因此,它决定了
auto
的大小#parent
基于的全宽#child
。
Then it sizes #child
to flex-basis: 10px
. 然后它将
#child
大小#child
为flex-basis: 10px
。
At his point, however, the auto
width of the parent has already been determined and is inflexible. 然而,在他的观点上,父母的
auto
宽度已经确定并且不灵活。
Testing in Chrome, re-arranging the rules makes no difference, so it doesn't appear to be a cascading issue. 在Chrome中进行测试,重新安排规则没有任何区别,因此它似乎不是一个级联问题。
This is my view of the behavior without an official reference to back it up. 这是我对行为的看法,没有正式的参考支持。 You may find the precise answer here: W3C Spec: Flex Layout Algorithm
您可以在这里找到准确的答案: W3C规范:Flex布局算法
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.