如何正确获取使用 flex-direction:column 显示的块的实际宽度？

Question

例如：

超文本标记语言

console.log($('.container').width()); // 600px as we defined in css.
console.log($('.list').width()); // 600px

console.log($('.box').eq('-1').position().left + $('.box').outerWidth());

body{padding:0;margin:0;}
.container {
  width: 600px;
  backround:#E1BEE7;
}

.list {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  height:120px;
  background:#FFCDD2;
}

.box {
  margin:10px;
  flex-shrink:0;
  flex-grow:0;
  flex-basis:auto;
  width: 100px;
  height: 100px;
  text-align:center;
  line-height:100px;
  background: #F44336;
  color:#FFF;
  font-size:2rem;
}

.result{
  padding:1rem;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="container">
  <div class="list">
    <div class="box">1</div>
    <div class="box">2</div>
    <div class="box">3</div>
    <div class="box">4</div>
    <div class="box">5</div>
    <div class="box">6</div>
    <div class="box">7</div>
    <div class="box">8</div>
    <div class="box">9</div>
    <div class="box">10</div>
  </div>
</div>

有10个盒子，每个盒子的宽度为100px，元素的实际宽度.list应该是1000px而不是600px。

我尝试使用以下方法来获取列表的实际宽度：最后一个子元素的左侧位置及其outerWidth

console.log($('.box').eq('-1').position().left + $('.box').outerWidth());

我想知道：是否有更好的方法来获取这种 Flexbox 元素的实际宽度？是否存在一些更好的内置 javascript 或 jquery 方法？

Answer 1

我需要的只是el.scrollWidth.