CSS flex-shrink Property - Playground Example

« Back to CSS flex-shrink Property

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#content {
  display: flex;
  width: 500px;
}
#content div {
  flex-basis: 120px;
  border: 3px solid rgba(0,0,0,.2);
}
.box {
  flex-shrink: 1;
}
.box1 {
  flex-shrink: 2;
}
</style>
</head>
<body>
<p>The width of content is 500px; the flex-basis of the flex items is 120px.</p>
<p>A, B, C have flex-shrink:1 set. D and E have flex-shrink:2 set</p>
<p>The width of D and E is less than the others.</p>
<div id="content">
  <div class="box" style="background:red;">A</div>
  <div class="box" style="background:lightblue;">B</div>
  <div class="box" style="background:yellow;">C</div>
  <div class="box1" style="background:brown;">D</div>
  <div class="box1" style="background:lightgreen;">E</div>
</div>
</body>
</html>

If this site has been useful, we’d love your support! Running this site takes time and resources, and every small contribution helps us keep creating valuable content. Consider buying us a coffee to keep things going strong!

☕ Buy a Coffee