Home/ Questions/Q 9130097
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-17T07:53:46+00:00

I’ve played with this nice CSS Flexbox demo page and I understand most of

  • 0

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.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

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

    • 0