getBoundingClientRect().width 未返回正确的宽度

Question

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

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 排列的元素来说不是很好吗？

Answer 1

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

请参阅此处： https: //jsfiddle.net/aprax/t94cj9hh/1/

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