css - Flex 项目没有随着边框和框大小正确增长：border-box

Question

根据我对边界框的弹性算法的理解，用于计算剩余空间（用于将可用空间分配给弹性项目），除了弹性项目的主要尺寸属性外，仅包括边距。但似乎浏览器甚至对边框框也采用了边框宽度。这是演示该问题的jsfiddle ：

.flexbox {
  display: flex;
  width: 600px;
  flex-direction: row;
}

.flexItem {
  flex: 1 0 0px;
  height: 20px;
  box-sizing: border-box;
}

.flexbox :nth-child(1) {
  background-color: blue;
}

.flexbox :nth-child(2) {
  background-color: green;
}

.flexbox :nth-child(3) {
  background-color: red;
}

<div class="flexbox">
  <div class="flexItem" style="border-left: 150px solid black"></div>
  <div class="flexItem" style="border-right: 150px solid orange"></div>
  <div class="flexItem"></div>
</div>

这里第一个和第二个 div 的宽度分别为 250 和 250，第三个 div 的宽度为 100。这对我来说似乎是错误的。我对么？