Javascript getBoundingClientRect（）.width未返回正确的宽度

我试图获取元素的宽度，但该值始终小于实际宽度。这是我目前的代码：

this.rightSectionElement = this.$('.sections').eq(1).get(0);
this.rightSectionOffset = this.rightSectionElement.getBoundingClientRect().width;

所讨论的元素上的CSS如下所示：

nav{
    position: relative;
    width: 100%;
    height: 100%;
    @include inline-flex();
    flex-wrap: nowrap;
    justify-content: space-between;
    z-index: 1;

    .sections{
              @include flex-value(0 1 auto);
              height: 100%;
              width: auto;
              display: block;
...

---

这种方法是否不能很好地处理flexbox排列的元素？

是否对元素应用了任何边距或边框？getBoundClientRect（）在计算宽度时不考虑边距或边框

请看这里：

---

你知道发生了什么事吗？当我将getBoundingClientRect（）与flexbox一起使用时，我的宽度损失了40px，高度损失了5px。

#container {
  display: flex;
  width: 300px;
  margin: 20px;
  border: 5px;
}
--------------
//Outputs 300
document.write(document.getElementById("container").getBoundingClientRect().width);