CSS flex-shrink Property

The flex-shrink property sets the shrink factor for a flex item.

This is relevant when items do not fit inside a container.

flex-shrink sets the shrinkage relative to other items.

Example

#

Item 3 has flex-shrink set to 4.
It shrinks up to 4 times or until the container is filled.

1
2
3
<style>
  .flex-shrink {
    background-color: #776fac;
    padding: 5px;
    display: flex;
  }

  .flex-shrink > div {
    background-color: aliceblue;
    margin: 5px;
    width: 45%;
    text-align: center;
    line-height: 55px;
    font-size: 20px;
  }
</style>

<div class="flex-shrink">
  <div>1</div>
  <div>2</div>
  <div style="flex-shrink: 4">3</div>
</div>

Syntax

flex-shrink: number | initial | inherit;

Values

#

Value Description
number A floating point number representing a shrink factor. Default value is 0 (no shrinking).
initial Sets the value to its default value.
inherit Inherits the value from its parent element.

Browser support

This table shows when flex-shrink support started for each browser.

Chrome
29.0 Aug 2013
Firefox
28.0 Mar 2014
IE/Edge
11.0 Oct 2013
Opera
17.0 Aug 2013
Safari
9.0 Sep 2015

You may also like

Guides