`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布局算法