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浏览器。