寬度和彈性基礎之間的區別

Question

我遇到了width和flex-basis之間的行爲差​​異，我無法通過What are the differences between flex-basis and width?來解釋。

.outer { 
 
    display: flex; 
 
    background: yellow; 
 
    padding: 10px; 
 
} 
 
.middle { 
 
    display: flex; 
 
    flex-shrink: 0; 
 
    background: red; 
 
    padding: 10px; 
 
} 
 
.inner { 
 
    flex-basis: 258px; 
 
    flex-shrink: 0; 
 
    display: flex; 
 
    flex-grow: 0; 
 
    background: green; 
 
} 
 
.inner2 { 
 
    width: 258px; 
 
    flex-shrink: 0; 
 
    display: flex; 
 
    flex-grow: 0; 
 
    background: green; 
 
}

<div class="outer"> 
 
    <div class="middle"> 
 
    <div class="inner"> 
 
     hello 
 
    </div> 
 
    </div> 
 
</div> 
 

 
<div class="outer"> 
 
    <div class="middle"> 
 
    <div class="inner2"> 
 
     hello 
 
    </div> 
 
    </div> 
 
</div>

Here是說明我有問題的例子。我期待兩行看起來相同，但是，當使用flex-basis（第1行）時，flex容器（.middle元素）似乎忽略其子元素的內在寬度（.inner元素），並且僅考慮文本。

這種差異可以在最新版本的Chrome，FF和Safari中觀察到（但不在IE11/Edge中）。

澄清：我不問爲什麼IE11/Edge的行爲方式如此。它的行爲（在這種情況下）對我來說似乎是合乎邏輯的。我在問爲什麼所有其他瀏覽器都有差異。

更新：邊緣13的行爲與IE11類似。

Answer 1

這似乎是一個錯誤。 一個既是柔性容器又是柔性物品的元素似乎忽略了其子元素的內在尺寸，如果它們是通過flex-basis設置的，而不是選擇測量其子元素的寬度/高度。具有諷刺意味的是IE11/Edge是唯一正確實現這一點的瀏覽器。

Chromium bug tracker

Answer 2

這是因爲IE11支持彎曲不同（僅在技術上部分支持）。 IE 11需要將一個單元添加到第三個參數中，flex-basis屬性參見下面源代碼中的msdn文檔。

因此，忽略無單位柔性基值的Flex速記聲明。

flex-basis是容器可以擁有的最小寬度，然後根據其他規則增長/縮小。寬度不需要與flex和flex基礎同時使用，因爲它們與X瀏覽器兼容性相沖突。

我已經更新了你的codepen，以幫助解釋。請在這裏看到：http://codepen.io/mattpark22/pen/wWqKpz

現在你可以看到瀏覽器如何處理不同的柔性與：

flex-basis: 258px; 
width: 258px; 

我也刪除

display: flex; 

從.outer - 這是有效果也。

來源：http://caniuse.com/#search=flex-basis

來源：https://github.com/philipwalton/flexbugs#4-flex-shorthand-declarations-with-unitless-flex-basis-values-are-ignored

來源：https://msdn.microsoft.com/en-us/library/dn254946%28v=vs.85%29.aspx