CSS flex-shrink Property

The CSS flex-shrink property defines how the item will shrink relative to the rest of the flexible items inside the same container.

Syntax:

flex-shrink: number;

number – A number defining how much the item will shrink relative to the rest of the flexible items. The default value is 1.

Example:

<!DOCTYPE html>
<html>
<head>
<style>
#box-container {
  width: 300px;
  height: 100px;
  border: 3px solid #333;
  display: flex;
}

#box-container div {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 70px;
}

#box-container div:nth-of-type(3) {
  flex-shrink: 3;
}
</style>
</head>
<body>

<div id="box-container">
  <div style="background-color:#264653;"></div>
  <div style="background-color:#2a9d8f;"></div>
  <div style="background-color:#e9c46a;"></div>
  <div style="background-color:#f4a261;"></div>
  <div style="background-color:#e76f51;"></div>
</div>

</body>
</html>

Output:

Note: Internet Explorer 10 and earlier versions do not support the flex-shrink property!

Enjoy coding!

Share this: