`flex-basis：auto` size parent如同孩子是`flex-basis：auto`，當孩子是`flex-basis：10px`時

例如，你不應該能夠看到父母的紅色在這裏，但你這樣做，因爲parent: 0 0 auto正在調整父級的大小到其子內容的自動寬度。你可以清楚地看到，它的內容真正的寬度是10px，所以它的自動調整大小不應該使父母10px？`flex-basis：auto` size parent如同孩子是`flex-basis：auto`，當孩子是`flex-basis：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，所以想必這會變成是正確莫名其妙。我想知道如何，以便我可以阻止它。

來源

2016-12-08 mako

根據我對規範的理解，這是一個錯誤。

Michael_B說的是正確的，第一個#parent是大小的，一旦它的寬度知道了，#child就可以彎曲。由於彎曲通常涉及生長或收縮，因此在彎曲柔性物品之前必須知道柔性容器的大小;並且flex項目的最終大小可能不是flex基礎，因此flex容器不應使用該值進行大小設置。

解決方案很簡單：使用width而不是flex-basis。 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 Item Intrinsic Size Contributions

主要尺寸的 flex item min-content/max-content contribution是其外min-content/max-content size，作爲最大值（如果它不是可增長的）和/或作爲最小值（如果它不可收縮的話），然後被其進一步限制爲/max main size properties。

不可收縮的不可收縮柔性物品的貢獻被其柔性基礎大小夾緊，既作爲最大值又作爲最小值。也就是說，貢獻恰好是靈活基礎大小，當靈活基礎是明確的時，靈活基礎大小被定義爲靈活基礎。

來源

2016-12-09 14:37:40 Oriol

它看起來像flex佈局算法計算彈性容器的寬度之前到達flex項目的寬度。

因此，它基於#child的全部寬度來確定#parent的大小auto。

然後它的大小爲#child到flex-basis: 10px。

然而，在他看來，親本的auto寬度已經確定並且不靈活。

在Chrome中進行測試，重新安排規則沒有任何區別，所以它似乎不是一個級聯問題。

這是我對沒有官方參考的行爲的看法。你可能會在這裏找到確切的答案：W3C Spec: Flex Layout Algorithm

來源

2016-12-09 13:03:22

`flex-basis：auto` size parent如同孩子是`flex-basis：auto`，當孩子是`flex-basis：10px`時

回答

相關問題