40

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 apply there, I see no difference on the page.

From the 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.

In what circumstances will flex-shrink 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.

Is it supported at all already?

As a solution, either a set of options on the linked demo, or JSFiddle-like live demo will be highly appreciated.

TylerH
  • 20,799
  • 66
  • 75
  • 101
jakub.g
  • 38,512
  • 12
  • 92
  • 130
  • 1
    Actually it seems the issue is with Chrome's implementation. Tried Firefox Nightly and in overflow scenarios the flex-shrink is applied. I'll post a demo soon. – jakub.g Jan 08 '13 at 22:18
  • 1
    Are you sure? There seemed to be no difference between the flex shorthand vs writing out all 3 in Chrome (flex-shrink/flex-grow/flex-basis): http://jsfiddle.net/GyXxT/1/ – cimmanon Jan 08 '13 at 22:23
  • I was using very small sizes of flex-basis in pixels and Chrome was interpreting it differently than Firefox. – jakub.g Jan 08 '13 at 22:38
  • BTW Here's the initial scenario I've said that was not working at Chrome but works in Firefox Nightly: http://jsfiddle.net/eZ5f8/3/ both children have `flex-basis:auto` and same `flex-grow` but different `flex-shrink`. Flexbox has 300px width and children 250px each. Firefox shrinks children accordingly while Chrome not. – jakub.g Jan 08 '13 at 22:51
  • Actually having experimented with various browsers, I must admit that for now, Opera 12 has the best support of flex layout. – jakub.g Jan 11 '13 at 20:20
  • how `flex-shrink` works: http://stackoverflow.com/q/34753491/3597276 – Michael Benjamin Mar 07 '16 at 03:23

1 Answers1

39

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;
}

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).

cimmanon
  • 67,211
  • 17
  • 165
  • 171