JSFiddle
我正在尝试使用flex CSS属性将一组元素放入一个整洁的小盒子中.
它看起来我想在IE10中如何,但Chrome显示它非常不同.我基本上有：
>容器
>选择框(flex：5),应该足够宽以显示D,但不会更宽.
>文本输入(flex：10),应占据包含宽度的一半多一点
>确认按钮(flex：6),应足够宽以包含其文本,但不多.
它在IE中工作正常,但在Chrome中,前两个元素占据了宽度的50％,使得确认按钮不再有效.
我的Flex逻辑是错误的,还是Chrome搞砸了？
解决方法
flex属性的flex-grow部分(第一个数字)确定当它们的组合尺寸小于它们的flex容器时,如何在flex元件之间分配额外空间.额外的空间如下划分：[flex-grow value] / [所有兄弟姐妹的弹性增长值之和]
>文字输入：10/21
>选择框：5/21
>确认按钮：6/21
这个额外的空间沿主轴添加到元素的大小,以确定其最终大小.它不用于确定元素相对于其Flex容器的大小,这是设置为百分比时的flex-basis和/或width / height值.
当柔性元件的组合尺寸大于其容器时,柔性特性(第二无单位值)的柔性收缩部分起作用.它基本上与flex-grow相反：比率相同,但溢出大小从flex项中减去而不是添加.
Opera在他们的FlexBox基础文章：http://dev.opera.com/articles/view/flexbox-basics/中对此属性进行了非常好的解释
对于您的特定问题,我可以通过将input元素的宽度设置为一个非常小的值来解决它：
input {margin:0; width: 20px}
如果添加未加前缀的属性,此解决方案似乎在Opera中不起作用.它可能也不适用于Firefox.它还使元素太小而无法用于非FlexBox浏览器.
