In what circumstances is flex-shrink applied to flex elements and how does it work?

Question

I\'ve played with this nice CSS Flexbox demo page and I understand most of the concepts, however I was not able to see flex-shrink in work. Whatever settings I

Answer 1

In order to see flex-shrink in action, you need to be able to make its container smaller.

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 or Firefox nightly build)
• http://jsfiddle.net/GyXxT/1/ (webkit)

In this example, both child elements ideally want to be 10em wide. If the parent element is greater than 20em wide, the 2nd child will take twice as much leftover space as the 1st child, making it appear bigger. If the parent element is less than 20em wide, then the 2nd child will have twice as much shaved off of it as the 1st child, making it look smaller.

Current flexbox support: Opera (unprefixed), Chrome (prefixed), IE10 (prefixed, but uses slightly different property names/values). Firefox currently uses the old spec from 2009 (prefixed), but the new spec is supposed to be available in experimental builds right now (unprefixed).