title: In what circumstances is flex-shrink applied to flex elements and how does it work?
body: <p>I've played with this nice <a href="http://demo.agektmr.com/flexbox/">CSS Flexbox demo page</a> and I understand most of the concepts, however I was not able to see <code>flex-shrink</code> in work. Whatever settings I apply there, I see no difference on the page.</p>
  
  <p>From the <a href="http://www.w3.org/TR/css3-flexbox/#flex-shrink-factor">spec</a>:</p>
  
  <blockquote>
    <p>&lt;‘flex-grow’></p>
    
    <p>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’. </p>
    
    <p>&lt;‘flex-shrink’></p>
    
    <p>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.</p>
  </blockquote>
  
  <p>In what circumstances will <code>flex-shrink</code> be applied (i.e. when the negative space is distributed)? I've tried custom page with setting widths on the flexbox element and (min-)widths of the elements inside it to make an overflow, but it seems it's not the described case.</p>
  
  <p>Is it supported at all already?</p>
  
  <p>As a solution, either a set of options on the linked demo, or JSFiddle-like live demo will be highly appreciated.</p>