SOURCE

function getSize() {
  for (var i = 1; i < 4; i++) {
    document.getElementById('item' + i).innerText = document.getElementsByClassName('item' + i)[0].clientWidth;
  }
}
window.onresize = getSize;
getSize();

<div class="container">
  <div class="item item1">
    flex shrink
  </div>
  <div class="item item2">
    flex shrink
  </div>
  <div class="item item3">
    flex shrink
  </div>
</div>
<h3>
  item1的长度：
  <span id="item1">
  </span>
</h3>
<h3>
  item2的长度：
  <span id="item2">
  </span>
</h3>
<h3>
  item3的长度：
  <span id="item3">
  </span>
</h3>

html,
body {
  margin: 0;
  padding: 0;
}

.container {
  display: flex;
  width: 300px;
  background-color: #ccc;
}

.item {
  margin: 10px;
  line-height: 40px;
  text-align: center;
  font-size: 20px;
  background-color: #0099cc;
}


/*相当于负的剩余空间没有弹性，不进行分配的*/

.item {
  flex-shrink: 0;
}

.item2 {
  flex-shrink: 2;
}


/*
        超出的空间：（95.5+20）*3 - 300 = 46.5
        item1 flex-shrink: 1 那么width = 95.5-46.5/4 = 83.875
        item2 flex-shrink: 2 那么width = 95.5-46.5/2 = 72.25
        item3 flex-shrink: 1 那么width = 95.5-46.5/4 = 83.875
        margin始终不变
        */