在什么情况下Flex-shrink应用于柔性元素，它是如何工作的？
我已经玩过这个漂亮的CSS Flex的演示页面 ，我理解了大部分的概念，但是我无法看到flex-shrink在工作中。 无论我在那里应用什么设置，我都看不到页面上的差异。
从规格 ：
<“柔性成长”>
此组件设置“flex-grow”longhand，并指定flex增长因子，该因子决定了在分配正空闲空间时flex项目相对于flex容器中其余Flex项目将增长的程度。 省略时，设为“1”。
<“柔性缩水”>
此组件设置“flex-shrink”longhand并指定柔性收缩因子，该因子决定在分配负空闲空间时，Flex项目相对于Flex容器中其余Flex项目收缩的程度。 省略时，设为“1”。 柔性收缩因子在分配负空间时乘以柔性基础。
在什么情况下应用flex-shrink （即负空间分布时）？ 我已经尝试过在flexbox元素上设置宽度的自定义页面，并且在里面的元素的宽度（min-）使溢出，但它似乎不是描述的情况。
它已经被支持了吗？
作为解决scheme，链接的演示中的一组选项或者JSFiddle-like现场演示将非常感谢。
为了看到flex-shrink的行动，你需要能够使其容器更小。
HTML：
<div class="container"> <div class="child one"> Child One </div> <div class="child two"> Child Two </div> </div>
CSS：
div { border: 1px solid; } .container { display: flex; } .child.one { flex: 1 1 10em; color: green; } .child.two { flex: 2 2 10em; color: purple; }
- http://jsfiddle.net/GyXxT/ （没有前缀 – Opera或Firefox每晚构build）
- http://jsfiddle.net/GyXxT/1/（webkit ）
在这个例子中，两个子元素最好都是10em宽。 如果父元素大于20em，则第二个孩子的剩余空间将比第一个孩子多一倍，使其显得更大。 如果父母的元素小于20em宽，那么第二个孩子会比第一个孩子less两倍，使它看起来更小。
目前的flexbox支持：Opera（无前缀），Chrome（前缀），IE10（前缀，但使用略有不同的属性名称/值）。 Firefox目前使用的是2009年以前的旧规格（前缀），但新规范应该在实验版本中可用（前置前缀）。
