Flex的增長預期不工作（柔性物品沒有我期望的寬度）

Question

JSFiddle

我試圖使用flex CSS屬性，以適應一組元素成一個整潔的小盒子。

它看起來完全如何我想在IE10中，但Chrome顯示它非常不同。我主要有：

• 集裝箱
  • 選擇框（flex:5），應約寬足以顯示D，而不是更廣泛。
  • 文本輸入（flex:10），應占用一半多一點的寬度包含
  • 確認按鈕（flex:6），應足夠寬以包含它的文本，但沒有更多。

它工作正常在IE，但在鉻前兩個元素佔用每個寬度的50％，留下確認按鈕脫落的端部。

我的Flex邏輯錯了，還是Chrome搞亂了？

Answer 1

flex屬性（第一個數字）的flex-grow部分決定了當flex元素的組合大小小於flex容器時應該如何分配額外空間。額外的空間劃分，像這樣：[flex-grow value]/[sum of flex-grow values for all siblings]

• 文本輸入：10/21
• 選擇框：5/21
• 確認按鈕：6/21

這個額外的空間將被添加到該元素的尺寸沿主軸確定其最終尺寸。它不用於確定元素相對於其彈性容器的大小，這是設置爲百分比時的彈性基礎和/或寬度/高度值。

當柔性元素的組合大小大於其容器時，flex屬性（第二個無單位值）的部分發揮作用。它基本上與flex-grow相反：比率相同，但溢出大小從彈性項目中減去而不是添加。

歌劇有此屬性的一個非常好的解釋他們Flexbox的基礎知識文章：http://dev.opera.com/articles/view/flexbox-basics/

爲了您的具體問題，我能夠解決它在Chrome中通過輸入元素的寬度設置爲一個很小的值：

http://jsfiddle.net/JTEhW/2/

input {margin:0; width: 20px} 

如果添加前綴的屬性此解決方案不會出現在歌劇院工作。它可能無法在Firefox中工作。它還使元素太小而無法用於非Flexbox瀏覽器。