css – 在什么情况下flex-shrink应用于flex元素,它是如何工作的？

我玩过这个漂亮的 CSS Flexbox demo page，我理解大多数的概念，但我不能看到flex收缩在工作。无论我在那里应用什么设置，我看到页面上没有区别。

从spec：

<‘flex-grow’>

This component sets ‘flex-grow’ longhand and specifies the
flex grow factor,which determines how much the flex item will grow
relative to the rest of the flex items in the flex container when
positive free space is distributed. When omitted,it is set to ‘1’.

<‘flex-shrink’>

This component sets ‘flex-shrink’ longhand and specifies the
flex shrink factor,which determines how much the flex item will
shrink relative to the rest of the flex items in the flex container
when negative free space is distributed. When omitted,it is set to
‘1’. The flex shrink factor is multiplied by the flex basis when
distributing negative space.

在什么情况下应用弹性收缩(即当负空间分布时)？我试过自定义页面设置宽度的flexbox元素和(min-)宽度的元素内部，使溢出，但似乎它不是描述的情况。

它已经支持吗？

作为一个解决方案，链接演示中的一组选项，或JSFiddle类似的现场演示将受到高度赞赏。

解决方法

为了看到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/(unprefixed – Opera或Firefox nightly build)
> http://jsfiddle.net/GyXxT/1/(webkit)

在这个例子中，两个子元素理想地希望是10em宽。如果父元素大于20em宽，第二个孩子将剩下两倍的剩余空间作为第一个孩子，使其看起来更大。如果父元素小于20em宽，那么第二个孩子将比第一个孩子削减两倍，使它看起来更小。

当前flexbox支持：Opera(无前缀)，Chrome(前缀)，IE10(前缀，但使用略有不同的属性名称/值)。 Firefox目前使用2009年的旧规范(前缀)，但是新规范应该现在可以在实验版本中使用(无前缀)。