爲什麼Flexbox內部的圖像不收縮？

我有一個包含div。讓我們說容易的數學，它有一個max-width: 1000px;。我已將它設置爲display: flex;

它裏面我有兩個div。 div1和div2。我希望div2始終佔用右邊的300px，並隨着瀏覽器窗口的大小調整div1在左邊展開/收縮。

Div1實際上包含一個動態生成的文本圖像，基於用戶輸入的內容（遺留CMS系統，不要求）。換句話說，它可能有一個非常廣泛的圖像，而且我不會提前知道圖像實際上有多寬。當用戶輸入大量文字並且圖像太寬時，我遇到了麻煩。如果div1中的圖像最終爲1500px寬，則會導致div1爲1500px寬，這會將div2從包含div中移出。

#container { 
    max-width: 1000px; 
    display: flex; 
} 

#div1 { 
    flex: 1 1 auto; 
} 

#div1 img { 
    max-width: 100%; /*this doesn't work*/ 
} 

#div2 { 
    width: 300px; 
    flex: 1 0 auto; 
}

如何強制div1始終尊重最大尺寸，而不管圖像有多大？

來源

2015-07-10 Taylor Huston

你的問題是[我怎樣才能在FF FF 34.x 33.x Flexbox的行爲？]（http://stackoverflow.com/questions/26895349/how-can-i-get -ff-33 -x-flexbox-behavior-in-ff-34-x）+'＃div2 {flex：1 0 auto}'。 – Oriol

要柔性物品提供更合理的默認最小大小，這說明書介紹了一種新auto值作爲 min-width和min-height屬性的初始值。 - W3C

Chrome還沒有實現，但Firefox已經。你可以做的是：

#div1 { 
    flex: 1 1 100%; 
    min-width: 0; /* for Firefox and future Chrome etc. */ 
} 

#div2 { 
    width: 300px; 
    flex: 0 0 auto; /* do not grow or shrink the size */ 
}

JSFIDDLE DEMO

來源

2015-07-10 20:25:26 Stickers

這不是div2增長或縮小的問題。它保持適當的大小，div1只是將它從包含div中推出，如果它太沼澤 –

我更新了它，我猜這個問題只在Firefox上提供，現在已經修復。 – Stickers

我只是想說，「是的，我剛剛測試過，你說得對，它在Chrome中工作。」謝謝！愚蠢的瀏覽器不一致.... –

爲什麼Flexbox內部的圖像不收縮？

回答

相關問題