SOURCE

function getSize() {
    document.getElementById('son').innerText = document.getElementsByClassName('son')[0].clientWidth;
}
window.onresize=getSize;
getSize();

<div class="container">
  <p class="son">
    CSS 属性 flex-basis 指定了 flex 元素在主轴方向上的初始大小。如果不使用 box-sizing 来改变盒模型的话，那么这个属性就决定了
    flex 元素的内容盒（content-box）的宽或者高（取决于主轴的方向）的尺寸大小。
  </p>
</div>
<h3>
  son的宽度：
  <span id="son"></span>
</h3>

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

.container {
  margin: 20px;
  font-size: 20px;
  background-color: #ccc;
  display: flex;
}

.son {
  /* box-sizing: border-box; */
  margin: 10px;
  padding: 3px;
  width: 300px;
  flex-basis: 200px;
  background-color: #0099cc;
}