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);