<p>the width of content is 500px, flex-basic of flex item is 120px.</p>

<p>A, B, C are flex-shrink:1. D and E are flex-shrink:2</p>

<p>the width of D is not the same as A's</p>

<div id="content">

  <div class="box" style="background-color:red;">A</div>

  <div class="box" style="background-color:lightblue;">B</div>

  <div class="box" style="background-color:yellow;">C</div>

  <div class="box1" style="background-color:brown;">D</div>

  <div class="box1" style="background-color:lightgreen;">E</div>

</div>

#content {

  display: flex;

  width: 500px;

}

#content div {

  flex-basis: 120px;

  border: 3px solid rgba(0,0,0,.2);

}

.box {

  flex-shrink:;

}

.box1 {

  flex-shrink:;

}