的jsfiddle
我试图用flex CSS属性，以适应一组元素成一个整洁的小盒子。
它看起来正是我想它在IE10，而Chrome表明它非常不同。 我主要有：
flex:5 ），应约宽足以显示D ，而不是更广泛。 flex:10 ），要占用一半多一点的宽度包含 flex:6 ），应足够宽以包含它的文本，但没有更多。 能正常工作在IE，但在铬前两个元素占用每个宽度的50％，留下确认按钮脱落的端部。
是我的Flex逻辑错误，或由铬搞乱？
所述flex-grow的的部分flex性（第一个数字）确定如何额外的空间应的挠性元件之间被分发时，他们的组合的大小是比它们的柔性容器小。 额外的空间被划分像这样： [flex-grow value] / [sum of flex-grow values for all siblings]
10 / 21 5 / 21 6 / 21 这个额外的空间将被添加到元素的大小沿主轴线，以确定它的最终大小。 它不是用来确定元素多大相对于其柔性的容器，这就是当设置为一个百分比柔性基础和/或宽度/高度值是。
当柔性元件的组合尺寸大于它的容器大，则flex-shrink的部分flex特性（第2无量纲值）开始发挥作用。 它基本上是相反flex-grow ：比例是相同的，但溢出的大小从柔性项目，而不是添加减去。
歌剧有此属性的一个非常好的解释他们Flexbox的基础知识文章： http://dev.opera.com/articles/view/flexbox-basics/
为了您的具体问题，我能够通过输入元素的宽度设置为一个很小的值来解决它在Chrome中：
http://jsfiddle.net/JTEhW/2/
input {margin:0; width: 20px}
如果添加前缀的属性此解决方案不会出现在歌剧院工作。 它可能不会在Firefox中工作，要么。 这也使得元素太小，无法对非Flexbox的浏览器使用。
